I've created a div and add 2 divs to it:
<div id="content">
<div id="a"></div>
<div id="b"></div>
</div>
and the styles:
#content {
width:100px;
height:100px;
background-color:blue;
}
#a, #b {
position:relative;
top:0px;
left:0px;
width:100px;
height:100px;
background-color:red;
}
#b {
top:-100px;
background-color:green;
}
In Firefox I got one 100x100 green "box", but in IE, the "content" div is higher than 100px (it is 200px high), and you can see the blue "box" under the green.
Is it possible to force the "content" div to be 100px high?
#content {
width:100px;
height:100px;
background-color:blue;
overflow:hidden;
}
Try overflow:hidden or overflow:auto on the #content div to see if that gives you the desired result. You may also want to issue a padding:0px; and margin:0px; on your divs.
Related
I have 3
Header
Content
Footer
They all set position fixed.
How to set (content) height automatically to be 100%?
The problem is the last text on the content section is hidden by footer div.
How to set content div height automatically calculate 100% - footer height?
html,body { height:100%; }
.wrapper { position:relative; width:100%; height:100%}
.box1 { position:fixed; top:0;left:0; width:100%; height:30px; background:red}
.box2 { position:fixed; top:30px;left:0; width:100%; height:100%; overflow-y:auto; background:gray}
.box3 { position:fixed; bottom:0;left:0; width:100%; height:30px; background:blue}
<div class="wrapper">
<div class="box1">head</div>
<div class="box2">content>last text</div>
<div class="box3">foot</div>
</div>
Add height:calc(100% - 60px); to box2 for minus header and footer both height and set overflow-y:hidden to html,body so you can get fixed div 100% height without scroll
html,body { height:100%; overflow-y:hidden; }
.wrapper { position:relative; width:100%; height:100%}
.box1 { position:fixed; top:0;left:0; width:100%; height:30px; background:red}
.box2 { position:fixed; top:30px;left:0; width:100%; height:calc(100% - 60px); overflow-y:auto; background:gray}
.box3 { position:fixed; bottom:0;left:0; width:100%; height:30px; background:blue}
<div class="wrapper">
<div class="box1">head</div>
<div class="box2">content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>last text</div>
<div class="box3">foot</div>
</div>
calc() CSS function lets you perform calculations while setting height, width or other property.
For your case, height: calc(100% - 30px); would help you out.
for more detail about calc(), please refer to MDN.
To fixed height or width you can use calc(100% - 30px);..
To handle dynamically changing height/width, You need to calculate with Javascript like this....
var screenHeight = window.innerHeight;
var headerH = document.getElementById("header").offsetHeight;
var footerH = document.getElementById("footer").offsetHeight;
document.getElementById("content").style.height = ((screenHeight - headerH) - footerH) + "px";
document.getElementById("content").style.top = headerH + "px";
.header{
background-color:red;
position:fixed;
top:0px;
left:0px;
width:100%;
}
.footer{
background-color:red;
position:fixed;
bottom:0px;
left:0px;
width:100%;
}
.content{
position:fixed;
left:0px;
background-color:yellow;
width:100%;
}
<div class="header" id="header">header</div>
<div class="content" id="content">content</div>
<div class="footer" id="footer">footer</div>
Instead of height, use bottom: 30px; for box2. it will work.
I want the child div width to be 100% of the body.
CSS
#container {
position:relative;
width:400px;
height:100px;
margin:0 auto;
background:red;
}
#inner {
width:100%;
height:30px;
background:blue;
}
HTML
<div id="container">
<div id="inner"></div>
</div>
Here is the fiddle
I'm using position:relative for parent div and the position:absolute; solution is not working. How can I do this? Js solutions are acceptable.
Check this fiddle
CSS
body {
margin-top:30px;
}
#container {
width:400px;
height:100px;
margin:0 auto;
background:red;
}
#inner {
width:100%;
height:20px;
background:blue;
position:absolute;
right:0;
left:0;
}
You just have to remove the position:relative from the container div and everything will work as expected
AND
I dont think there is a need for writing JS for this as this can be just obtained using CSS.
In html, if you have an element inside of a container while using % it will respect the containers boundaries.
So, no sure why Lal was downvoted. but his solution works.
Especially because your container is relative, the absolute container will be absolute to the container and not the body itself. You could remove position: relative; on the container and it will work that way, but it depends on what you want to do.
Is it possible to center an absolute position div within a relative dive with margin 0 auto?
HTML:
<div class="outer">
<div class="inner"></div>
</div>
CSS:
.outer{
background: red;
margin: 0 auto;
width:100px;
height:100px;
}
.inner{
position:absolute;
width:20px;
height:20px;
background:blue;
top:10px;
left:10px;
}
I was hoping that the absolute positioning would work within the outer one ok but I guess the margin. The above code can be seen here: http://jsfiddle.net/g4y4czff/
Ideally I'd like to use css to solve this but I reckon there's more likely to be a js solution.
Any ideas greatly appreciated.
C
New fiddle: http://jsfiddle.net/g4y4czff/1/
Just add position: relative to .outer
Reason is because the default position property is static
since you wanted it centered, here you have it centered horizontally and vertically too. Placing position:absolute; inside position:relative; allows it to be inside of it.
http://jsfiddle.net/g4y4czff/3/
.outer{
background: red;
margin: 0 auto;
width:100px;
height:100px;
position:relative;
}
.inner{
position:absolute;
width:20px;
height:20px;
background:blue;
top:0;
margin: auto;
left:0;
right:0px;
bottom:0;
}
Issue #1
Trying to make 2 divs align with eachother,
the fist div doesnt have a scrollbar, but the second has one. The scrollbar cause the second div to be offset from the first one.
Is there a way to align those 2 divs?
Issue #2
Why is the second div not scrolling when it has the overflow-y:scroll; ?
body, html {
margin: 0;
padding: 0;
border: 0;
outline: 0;
overflow:hidden;
}
.fixed-top-container {
text-align:center;
top:0px;
height:100px;
min-height:100px;
max-height:100px;
width:100%;
display:inline-block;
margin:0 auto;
padding:0;
background-color:rgba(0, 0, 0, 0.5);
}
.container {
width:100%;
height:100%;
background-color:#F0F0F0;
overflow-y:scroll;
}
.content {
width: 800px;
height:100%;
margin:0 auto;
background-color:#FFFFFF;
}
View JSFiddle for issue: http://jsfiddle.net/Aaeijh/qAh9g/1/
How can we get the bottom div to scroll?
Use the user friendly <textarea> instead of old <div> technique
<textarea rows="10" cols="50" class="container">
//your text here
</textarea>
JSFiddle
remove overflow:hidden; and overflow-y:scroll; ..
Hi i have this a div called "nav" that contains divs with a class "thumbs". Im trying to create a table of contents like div that can be scrolled to display further thumbnails.
this is my CSS so far: (note that each thumbs are position:absolute and is left: positioned accordingly)
#nav {
position:absolute;
width:768px;
height:214px;
bottom:0px;
/*-webkit-transform:translateY(214px);*/
background:gray;
overflow:auto;
}
.thumbs {
position:absolute;
width:80px;
height:100px;
margin:10px 10px 10px 10px;
background:white;
}
I want it to be scrollable so that if the thumbnails exceed 768px (width of nav) it can be scrolled to the left to view more.
Thanks
edit: I forgot to mention that I am doing this in PhoneGap. It will be a mobile app. thanks!
Remove position: absolute; and add float: left; from your thumbs class. That should do it.
UPDATE
If the number of thumbs are known in advance, the inner div's width can be set via CSS. Otherwise, it can be set onload or whenever a thumb is added/removed via JS.
$('#div').css('width', ($('.thumbs').length * $('.thumbs:first').outerWidth(true)) + 'px');
You can achieve this with the combination with max-width, display:inline-block & white-space.
Like this:
#nav_outer {
position:absolute;
bottom:0px;
background:gray;
overflow:auto;
}
#nav {
height:214px;
max-width: 300px;
bottom:0px;
/*-webkit-transform:translateY(214px);*/
background:gray;
white-space:nowrap;
}
.thumbs {
white-space:normal;
display:inline-block;
*display:inline; /*IE7*/
*zoom:1; /*IE7*/
width:80px;
height:100px;
margin:10px 10px 10px 10px;
background:white;
}
http://jsfiddle.net/xzcDD/3/
In my example when the .thumbs less than the width of 300px then there is no scroll