I have been reading all the 100% div height discussions and I can't find a simple solution. How can I make my div take up all of the vertical height of the screen?
Here is my code:
css
#mother {
width: 100%;
margin: 0 auto;
z-index: 1;
}
#stripe_wrap {
width: 1053px;
min-height: 500px;
margin: 0 auto;
background: lime;
}
#stripe1 {
width: 39px;
min-height: 500px;
margin: 0px 0px 0px 0px;
background: #000;
float: left;
}
#stripe2 {
width: 39px;
min-height: 500px;
margin: 0px 0px 0px 0px;
background:#000;
float: right;
}
html
<div id="mother" style="overflow-x: hidden;">
<div id="stripe_wrap">
<div id="stripe1"></div>
<div id="stripe2"></div>
</div>
</div>
You have to make the <body> tag of the height 100% as well, otherwise it is vertically truncated to fit the content.
Also make sure to put the margin of <body> to 0px, because otherwise it will become 100%_of_visible_area + margin, resulting in a vertical scroll bar.
html, body {padding: 0px; margin: 0px; height: 100%;}
http://jsfiddle.net/kEv8F/ - my version.
http://jsfiddle.net/kEv8F/ - your version.
Is that what you meant?
Try to set height:100% for your <body> and <html>, too.
If there is nothing except this div on your page, 100% height will be 0px without these settings.
Related
I've a problem with my Menu, I don't know how to fix this. It needs to get the full height of your screen but I can't fix it.
Here is my CSS code.
nav{
background-color: #F9F9F9;
width: 300px;
padding: 10px;
position: absolute;
height: auto;
float: left;
box-shadow: -25px 0px 60px #00000033;
}
html body nav div#nav-inner{
padding-top: 70px;
margin: -10px;
}
Here is a JSFiddle with my problem:
JSFiddle
First you need wrapper div inside body:
<body>
<div class="wrapper"><!--added-->
<nav>...</nav>
<div id="container">...</div>
</div>
</body>
With CSS:
.wrapper{
position: relative;
overflow: hidden;
}
Next you need to change #container div "position:absolute" to "position:relative"
and finally:
nav{
height: 100%
}
On this way. You will have relative .wrapper with height of your page content and with full height of this content :)
I'm having problem with making a div stretch and shrink depending on the size of the browser.
Here is the html
<div class="content_container">
<div class="content_menu"></div>
<div class="content_left"></div>
<div class="content"></div>
</div>
.content_container{
margin: 0 auto;
height:100vh;
display:block;
}
.content_left{
background: #eee none repeat scroll 0 0;
display: inline-block;
float: right;
padding-top: 50px;
position: relative;
text-align: center;
width: 25%;
height:calc(100vh - 50px);
}
.content_menu{
background: #eee none repeat scroll 0 0;
float: left;
height: 100px;
width: 25%;
height:100vh;
}
.content{
background: #fff none repeat scroll 0 0;
display: inline-block;
margin-bottom: 0 !important;
margin-right: auto !important;
vertical-align: top;
width: 50%;
}
I've already tried giving height:auto, 100% and 100vh but none seems to work.
The .content_left and .content_menu fall short of the height of the .content so there are blank white spaces.
Is there anyway those layers can resize themselves to fit to the height as well as the .content div.
Can anyone help me out?
Use viewport width/height to set an elements dimensions relative to the window
body {
padding: 0; margin: 0;
width: 100%;
width: 100vw;
}
div {
background: lightblue;
height: 45px;
margin-top: 20px;
}
#two {
width: 100%;
width: 100vw;
}
#one {
width: 60%;
width: 60vw;
}
<div id="one">div one</div>
<div id="two">div two</div>
I'm guessing the blank white spaces you are talking about are those surrounding the gray elements on the left and right side. Those are caused by the default margin on the body. Just set the body margin to zero.
body { margin: 0; }
Using your markup in your question, it appears to work as I think you want it to.
I have a div that I'm trying to position by percent in order for it to stay in place (it kind of floats around not centered on an empty part of the page), while still making it accessible and look good across different screen sizes and not really off to one side.
The problem is that, while I can use left: x% to adjust it accordingly, trying to use top does not do anything unless I'm specifying pixels, not percent. If I try to alter bottom in any way, it latches the div I'm trying to position to up near my header, and altering bottom with px makes it go up the screen from the header area.
Absolutely positioning the content_wrapper actually makes the top attribute work just fine, but it pushes a bunch of space below my footer and adds a scrollbar, pretty much ruining the design beyond the footer.
Here's the HTML:
<body>
<div id="container">
<div id="content_wrapper">
<div id="header">
</div>
<div id="content">
<div class="marquee">
</div>
</div>
</div>
</div>
<div id="footer_wrapper">
<div id="footer">
</div>
</div>
</body>
And here is the CSS:
html, body {
height: 100%;
}
#content {
height: 100%;
position: relative;
width: 100%;
float: left;
}
body {
margin: 0;
padding: 0;
color: #FFF;
/* background: image.jpg; */
background-size: cover;
}
.marquee {
position: absolute;
height: auto;
padding: 10px 5px;
background-color: #F8F8F8;
width: 30em;
left: 15%;
}
#footer_wrapper {
width: 100%;
height: 43px;
}
#container {
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0px 0px -43px 0px;
}
#content_wrapper {
width: 100%;
margin: 0px 0px -41px 0px;
padding-top: 40px;
height: 100%;
}
#footer {
position: relative;
z-index: 10;
height: 4em;
margin-top: -4.07em;
background-color: #FFF;
clear: both;
background-color: #2A64A7;
border-top: 2px solid #F8F8F8;
}
(There is a float or two in there, like in #content, not necessary to the layout, but which are attempts to fix the issue.)
Any help in this matter would be hugely appreciated. Sorry about all the code, but I feel like the footer bits are necessary simply because of the aforementioned issue with scrolling.
Take out the
height: auto !important;
in #container.
That lets you use % for top or bottom.
I'm making a CSS layout that has a 960px wide div, and I'd like to have it reach from the top of the page to the bottom. The obvious solution is min-height: 100%;, but it doesn't work. Here's my CSS:
* {
margin: 0px;
padding: 0px;
}
body {
background: #FF0000;
height: 100%;
}
html {
height: 100%;
}
#sheet {
width: 960px;
min-height: 100%;
background: #000000;
margin: 0px auto 0px auto;
}
#sheet1 {
width: 760px;
min-height: 100%;
top: 0px;
bottom: 0px;
background: #FFFFFF;
}
And from my HTML:
<div id="sheet">
<div id="sheet1">
</div>
</div>
It display fine when I change #sheet's min-height to height, but then it would get cut off if the content took up more than a page. Is there a solution for this?
Try changing #sheet to height:100%, not min-height 100%, and add some content inside of #sheet-1.
Using 100% only takes effect only if there is HTML Element (text, image, or other elements) exist in it. Its height will be higher or shorter according to the length of the element. Thus min-height is used to specify only the exact number of length or height of the element. Try using pixels instead of percentage.
because you don't add any float or clear property ...
CSS will ignoring min-height and max-height, if the height property not defined,
Except if you add display:inline-block, but it can break your margin:0px auto; and i decide you to do like this:
* {
margin: 0px;
padding: 0px;
}
body {
background: #FF0000;
height: 100%;
text-align:center;
}
body * {
text-align:left;
}
html {
height: 100%;
}
#sheet {
width: 960px;
display:inline-block; // It can make height auto
min-height: 100%;
background: #000000;
margin: 0px auto 0px auto;
text-align:center;
}
#sheet1 {
width: 760px;
display:inline-block;
min-height: 100%;
background: #FFFFFF;
text-align:left;
}
Replace your css, with my code and i think it should work...
Not sure how to title the question. I have an html structure like this:
<div id="nav"></div>
<div id="wrapper">
<div id="content">
</div>
</div>
With some css like this:
#nav {
width: 200px;
height: 50px;
margin: 0 0 0 -100px;
position: fixed;
left: 50%;
background: red;
}
#wrapper {
width: 250px;
height: 1000px;
margin: 0 auto;
background: blue;
}
#content {
width: 200px;
height: 1000px;
margin: 0 auto;
background: green;
}
The wrapper is wider than the content, and the content is centered in the wrapper. My problem is keeping the nav div, which is fixed to the top of the page, centered/aligned with the content div when the window is smaller than the wrapper div. Issues arise when you scroll left and right, the fixed div stays centered in the window and the content div scrolls left and right. I'm trying to accomplish this without javascript.
Here's a jsfiddle of what I'm running into, resize the results window to see how the nav div won't stay centered/aligned with the content div when the window is smaller than the wrapper div.
http://jsfiddle.net/p2Mzx/1/
Thanks in advance!
The easiest solution would be to put #nav in your #wrapper and give it a horizontal margin of 25px:
html:
<div id="wrapper">
<div id="nav"></div>
<div id="content">
</div>
</div>
css:
#nav {
width: 200px;
height: 50px;
margin: 0 25px;
position: fixed;
top: 0;
background: red;
}
#wrapper {
width: 250px;
height: 1000px;
margin: 0 auto;
background: blue;
}
#content {
width: 200px;
height: 1000px;
margin: 0 auto;
background: green;
}
Also see the fiddle.
It would be more appropriate to put the nav inside the wrapper, just above the content.
<div id="wrapper">
<div id="nav"></div>
<div id="content"></div>
</div>
The CSS of the nav can have left and right margins of 25px. Also absolute positioning and the width is not needed.
#nav {
height: 50px;
margin: 0px 25px 0px 25px;
background: red;
}
#wrapper {
width: 250px;
height: 1000px;
margin: 0 auto;
background: blue;
}
#content {
width: 200px;
height: 1000px;
margin: 0 auto;
background: green;
}
Please see this fiddle: http://jsfiddle.net/p2Mzx/20/
You can fixed the nav and content to give padding-top.
Consider this link jsfiddle
I think you can add margin: 0 auto for nav too.
Then nav will be positoned to parent element just like wrapper,centered.
but removed fixed form nav. position:fixed makes it positioned to the browser window and out of narmal flow. Is that you want?