I'm trying to get a nested div to be full width on screen out of the div that it's contained/nested in.
http://jsfiddle.net/TheeAndre/JAdps/
<div class="fixedwidth">
<div class="fullwidth"></div>
</div>
Try
width:100vw;
instead of
width:100%;
Check for compatibility issues: http://caniuse.com/#search=vw
Pascalz, yes in your jsfiddle it works, but only as long as you don't specify a position other than static for your parent. In many cases you need your parent to be position:relative, so the child will relate width:100% to parent width.
try this :
.fullwidth {
background-color:#000;
width:100%;
height:100px;
position:absolute;
z-index:999;
left: 0;
right: 0;
}
Related
I'm using the "100% page height" pattern from this SO answer:
CSS Div stretch 100% page height
In other words I have a basic DOM structure of:
<hmtml> // has min-height: 100% and position: absolute
<body> // has height: 100%
<div id="myApp"> // has // has position:absolute/top: 0/bottom:0
<div id="inner"> // has no styles (or height: 100%; same difference)
Everything works great with html/body/#myApp: they all have 100% page height. My problem is the div#inner: it doesn't grow to the height of its parent (even if I give it height: 100%).
I believe this is happening because #myApp is positioned absolutely, and thus has no height for #inner to inherit. Is there any way to fix this without adding position: absolute; top: 0; bottom:0 to every nested element? It seems like if I can somehow get #inner to take its height from #main I can get all of its children to inherit that height ... but because of the absolute positioning I can't figure out how to do that.
Any help would be appreciated.
html, body{ height:100%; margin:0; }
#myApp{
position:absolute;
top:0; bottom:0; left:0; right:0;
background:red;
}
#inner{
height:100%;
background:gold;
}
<div id="myApp">
<div id="inner">
Inner should be gold and it is!
</div>
</div>
I've been enjoying and having success mocking up webpages with CSS. But then I decided to play with a "fixed menu" and my understanding is now not so clear.
So my brief knowledge make a blank HTML doc and then create a "container" div and place all your further elements within the "parent" container. No problem with this and all has been well with floating elements and such.
But when placing a "fixed" element within my parent div I'm lost as to why the fixed element observes the parent's left margin and ignores it's right margin.
html, body{margin: 0; padding: 0;}
#container
{
margin:0px auto;
width:90%;
height:500px;
background:#A8A8A8;
}
.fixed-menu
{
position: fixed;
height: 50px;
width:100%;
background-color: #00a087;
}
<body>
<div id="container">
<div class="fixed-menu"></div>
</div>
</body>
So with the above the "fixed" block does align with the left margin of the parent container but runs completely to the right edge of the browser page. I have figured out that I can make the fixed block 90% and resolve the issue but I don't understand why. Why would the block not be 90% of the parent "container" block.
I look forward to you knowledge.
Thanks
Update your css like below to achieve your desired result. Inherit your width from the parent instead of using 100%.
.fixed-menu
{
position: fixed;
height: 50px;
width:inherit;
left:auto;
right:auto;
background-color: #00a087;
}
DEMO
as stated by #freestock.tk, a fixed element is "fixed" to the screen viewport.
the width (and height of set in %) is computed relative to the screen viewport.
it looks like it's aligned to left margin of the parent container because you did not positioned it with left or right css properties, it's not constrained by the parent container, it is just at the same horizontal position in this peculiar case.
if you set
left:0;
it will align to the left margin of the viewport and ignore the parent container, this should help you better understand his fixed positioning.
html, body{margin: 0; padding: 0;}
#container
{
margin:0px auto;
width:90%;
height:500px;
background:#A8A8A8;
}
.fixed-menu
{
position: fixed;
left:0;
height: 50px;
width:100%;
background-color: #00a087;
}
<body>
<div id="container">
<div class="fixed-menu"></div>
</div>
</body>
You where almost there, just add to .fixed-menu few css rules more :
.fixed-menu {
left:0;
right:0;
margin:0 auto;
width: 95% // now you can change width and fixed element will be centered always
}
I have a simple HTML page and it contains two divs aligned vertically. The page is scrollable because of second div. I want the first div's position to be fixed, or nonscrollable, so that only the second div is scrollable. I added position:fixed to first div's css but this time, the second div was placed on first div, so the first div disappears under the second div.
CSS
body {
width:1000px;
height:100%;
margin:0 auto;/*body ortalama*/
}
#div1 {
height:300px;
background-color:#00CC66;
}
#div2 {
display:block;
word-wrap:break-word;
padding:30px;
font-size:72px;
background-color:#FF3;
}
HTML
<div>
<div id="div1"></div>
<div id="div2">
<p>
<!--Content Here-->
</p>
</div>
</div>
Fixed is always relative to the parent window, never an element. Once the position is set to fixed its taken out of the document flow.
Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport.
so in the second div2 add these
position:relative;
top:300px; /*Bump it down by the height of div1;*/
Hope it helps;
You should add a height and set overflow auto instead of scroll because with scroll you will have the scrollbar always even if the content is less than the specified height. For example:
#div2 {
background-color: #FFFF33;
display: block;
font-size: 72px;
height: 200px;
overflow: auto;
padding: 30px;
word-wrap: break-word;
}
Add this css to #div2 (you'll need to specify a height for #div2 otherwise the the scroll bar won't know where to start):
overflow-y:auto;
height:50px;
See the example here: http://jsfiddle.net/38xkn/1/ (scroll to the right first as you've set the body width to 100px, then you'll see the scroll bar for #div2).
Okay, here is another option. It's layout is somewhat different but it should get the job done. It uses absolute positioning on div1 to get it to the top, and a percentage width to stop it covering the scroll bar for div2. It's not perfect so you may need to tweek it slightly.
HTML
<body>
<div>
<div id="div1">a</div>
<div id="div2">
<p> SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSDDDDDDDDDLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLDDDDDDDDDDDDDDDDDDDDDDDDDDDDDAMSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSDDDDDDDDDLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</p>
</div>
</div>
</body>
CSS:
body{
width:100%;
height:100%;
margin:0 auto;/*body ortalama*/
overflow:hidden;
}
#div1{
height:300px;
background-color:#00CC66;
position:absolute;
top:0;
width:97.5%;
}
#div2{
display:block;
word-wrap:break-word;
padding:30px;
font-size:72px;
background-color:#FF3;
overflow-y:auto;
max-height:50px;
padding-top:300px;
}
EXAMPLE:
http://jsfiddle.net/38xkn/6/
So I got some divs... The aim here is to play with some hide-show effects.
<div class="container">
<div class="move">
Some dynamic content...
</div>
</div>
.container {
width:100px;
height:100%;
owerflow-y:hidden;
}
.move {
width:300px;
height:100%;
float:right;
}
The issue is that in ie7 the float right doesn't work. the .move div will stick left.
Is there any way to fix this ?
Thanks.
It is because your containers width is less than the contents.
ifyou choose the width of .container bigger, you'll see the effekt is working. If you want the .move to be in the container by DOM-Tree but not on the screen, use position: absolute.
You can use text-align:right instead of float:right with your current widths(Inner DIV with More than the Outer DIV width).
Im not too great at CSS but hopefully someone on here can help. I have the following mockup. (i have stripped out my content to make it easy to view)
<body>
<div id="container">
<div id="header"></div>
<div id="body">
<div id="navBar"></div>
<div id="mainContent"></div>
</div>
<div id="footer"></div>
</div>
</body>
my CSS is as follows:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
now im unsure as to how to get the "navBar" to be the page height. I've tried adding height: 100% but that doesnt work.
Thanks,
Matt
Giving an element height: 100% will give it a height equal to that of its containing element, which in your case is #body. Since body in your example is only as big as it needs to be to hold its content, #navBar will be 100% of that height.
To fix this, you can make #container and #body height:100% to make them as tall as tho body tag, which takes up the whole page:
#container {
height:100%
}
#body{
height:100%;
}
In the interest of completeness, you could also set the top and bottom of #navBar:
position: absolute;
top: 20px;
bottom: 60px; /* height of footer */
To understand the difference, play around with This JS Fiddle. Mess around with the height and top, bottom, position properties to see how your changes affect the layout; just don't use both positioning methods at once!
Your issue appears to be that each parent DIV all the way up to the BODY tag must explicitely have a height of 100% for #navBar to have 100% height. This means you would also have to set the height of #body to 100% as well, since it is the parent container of #navBar.
Have a look at this site - I assume you want a two column layout - this site will show you how to do what you want. Hope it helps.