I have the following html:
<body>
<div id="page">
<div id="header"></div>
<div id="content"></div>
</div>
</body>
and css:
html,body {
margin:0;
padding:0;
height:100%;
}
#page {
height:100%;
margin:auto;
left:0;
right:0;
width:500px;
}
#header {
height:100px;
width:500px;
}
#content {
width:500px;
height:100%;
}
The problem is that content div is the height of the window + the height of the header.
How can i make it to be the height of the window - the height of the header, I mean to stretch horizontally all over the remaining window. ??
In case you don't need to support IE7 and below - you can use a useful trick with
position: absolute
for #header and
padding-top: 100px;
box-sizing: border-box;
for #content.
Check out this fiddle: http://jsfiddle.net/Jx4sC/2/
Details regarding box-sizing support: http://caniuse.com/#feat=css3-boxsizing
You could use calc() in modern browsers and let the browser calculate the height of your content box:
#content {
width:500px;
height: calc(100% - 100px);
}
Similarly you could use some JavaScript to do the same. But then make sure to update your calculations each time the browser height gets changed.
This is supprisingly hacky to get going and you may not have to do it. for example, say you wanted to give #content a background-color, put it on #page instead.
html,body {
margin:0;
padding:0;
/* body should have height:100% by default */
}
#page {
height:100%;
margin: 0 auto;
width:500px;
/* use page as you would have used #content*/
}
#header {
height:100px;
}
#content {
}
edit: but if you really need to do this, you can do it like so
#page {
position: relative;
}
#content{
position: absolute;
top: 100px;
bottom: 0px;
left: 0px;
right: 0px;
}
this is not ideal because if you wanted to make #header bigger you need to remember to update #content, you can no longer use the normal page layout
Related
I want the body to have margins of like 15px and stay 100% height and width of the window, 100 vh is the same thing.
I want a welcome screen which will fit to the screen (resolution of the user) so basically the body should resize it self to the screen height and width when the user resizes the window.
Ok, so the problem is when I use 100% or vh with margin it overflows, i cannot work with hidden cuz i need the bottom part, now its okay with width because the its display block which fixes the problem for width.
h
https://jsfiddle.net/0dx36zb4/
Try
body {
width: 100vw;
height: 100vh;
}
You have to use box-sizing: border-box; along with width: 100vw; and height; 100vh;
Don't use margin on the body, instead use a parent/child element and set padding on the parent. Margin is outside of the element, and so is not considered in the calculation - yours overflows because it is 100% of the width/height, plus 15px in each direction. Padding is inside the element and you can set the browser to consider it in your width/height specifications with the box-sizing:border-box property.
HTML
<html>
<body>
<div id="parent">
<div id="child">
</div>
</div>
</body>
</html>
CSS
body {
width:100vw;
height:100vh;
}
#parent {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
width:100%;
height:100%;
padding:15px;
margin:0;
}
#child {
width:100%;
height:100%;
margin:0;
}
EDIT
I was also able to get your JSFiddle working so you can see an example of that if you replace your code with the code below.
html,body {
background-color: red;
height: 100%;
margin:0;
padding:15px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
section {
background-color: yellow;
height: 100%;
margin: 0;
}
Use padding and box-sizing to fix the issue. I updated your JSFiddle to work:
https://jsfiddle.net/0dx36zb4/4/
html,body {
background-color: red;
height: 100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
body {
padding:15px;
margin: 0;
}
section {
background-color: yellow;
height: 100%;
}
h1 {
margin: 0;
padding: 0;
}
<body>
<section>
<h1>hello</h1>
</section>
</body>
html, body {
height: 100%;
width: 100%;
margin: 0px;
border: 0;
overflow: hidden;
}
.splash {
height: 100%;
width: 100%;
z-index: 0;
}
<img src="http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg
" class="splash" />
I want to put a div with CSS just after the current window (i.e when you start scrolling you see it).
It seems trivial and I tried
#content {
margin-top: 100%;
}
JSFiddle
But It isn't working and the margin don't take the height the current window.
Solutions :
You can achieve your aim using position:absolute; and top:100%;
FIDDLE
second option is to add an element with height:100%; to "push" .content down FIDDLE
Explanation :
The issue is that percent margin-top (like margin-bottom or padding-top/bottom) is calculated according to parent's width. See here
Percentages refer to the width of the containing block
CSS :
body,html {
background-color: lightblue;
height:100%;
width:100%;
margin:0;
}
#content {
position:absolute;
top: 100%;
background-color: lightgrey;
}
Code option 2 :
HTML :
<div id="push"></div>
<div id="content">
<p>... content ...</p>
</div>
CSS :
body,html {
background-color: lightblue;
height:100%;
width:100%;
margin:0;
}
#push{
height:100%;
}
#content {
background-color: lightgrey;
}
I am trying to create a webpage layout with a header/footer (100% width, 145px height), a 'main area' between the header/footer (100% width, dynamic height), and a container around the content that is a unique background color (860px width, dynamic height but is always 'flush' against the footer).
(See Example for a visual)
The problem I am having is I can't seem to have the 'content container' always be flush with the footer when there is minimal content. Using a setup like the (original example) results in the footer floating over the content if there is a respectable/'normal' amount of content or if the window is resized.
And the Following CSS results in a gap between the content and the footer.
html,body{
margin:0;
padding:0;
height:100%;
background:yellow;
}
.wrap{
min-height:100%;
position:relative;
}
header{
background:blue;
padding:10px;
}
#content{
height:100%;
width: 400px;
margin:0 auto;
background:orange;
padding:30px;
}
footer{
background:blue;
position:absolute;
bottom:0;
width:100%;
height:60px;
}
How can I make the content container be the full height of the screen when content is minimal and have the footer 'stick' to the bottom of the page, while also being dynamic to resize appropriately if there is a normal amount of content (footer is always at the bottom of the content)?
Thank you!
FIDDLE: http://jsfiddle.net/3R6TZ/2/
Fiddle Output: http://fiddle.jshell.net/3R6TZ/2/show/
CSS
html, body {
height: 100%;
margin:0;
}
body {
background:yellow;
}
#wrapper {
position: relative;
min-height: 100%;
vertical-align:bottom;
margin:0 auto;
height:100%;
}
#header {
width: 100%;
height: 150px;
background:blue;
position:absolute;
left:0;
top:0;
}
#content {
background:pink;
width:400px;
margin:0 auto -30px;
min-height:100%;
height:auto !important;
height:100%;
}
#content-spacer-top {
height:150px;
}
#content-spacer-bottom {
height:30px;
}
#divFooter {
width:100%;
height: 30px;
background:blue;
}
HTML
<div id="wrapper">
<div id="header">Header</div>
<div id="content">
<div id="content-spacer-top"></div>
<div id="content-inner">
**Content Goes Here**
</div>
<div id="content-spacer-bottom"></div>
</div>
<div id="divFooter">Footer</div>
</div>
UPDATE
The #content-spacer-top and #content-spacer-bottom are used to pad the #content div without using padding or margin that would increase the box size past the 100% height causing problems.
In CSS3, there is the box-sizing property (more info here) that can fix this issue, but i'm assuming you don't want to depend on CSS3 features.
EDIT
Added a fix and tested down to IE7
UPDATE 2
Alternate method using :before and :after pseudo-elements instead of the spacer divs:
http://jsfiddle.net/gBr58/1/
Doesn't work in IE7 or 6 though, and to work in IE8, a <!DOCTYPE> must be declared (according to w3schools.com), but the HTML is nice and clean
UPDATE 3 (Sorry for so many updates)
Updated it to work down to IE6. I don't normally bother as my company doesn't support IE6, but it was an easy fix...
I think you need position: fixed on the footer:
footer {
width: 100%;
height: 30px;
position:fixed;
bottom:0;
}
I'm creating a sidebar with this CSS code:
.sidebar {
position: absolute;
z-index: 100;
top: 0;
left: 0;
width: 30%;
height: 100%;
border-right: 1px solid #333;
}
But the sidebar width doesn't scale when I change the browser width. How can I make the sidebar fluid?
Thanks.
Look at the height in body in CSS part.
Here is a working example for you:
Your HTML:
<div id="content">
<p>This design uses a defined body height of 100% which allows setting the contained left and
right divs at 100% height.</p>
</div>
<div id="sidebar">
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>
Your CSS:
body {
margin:0;
padding:0;
width:100%; /* this is the key! */
}
#sidebar {
position:absolute;
right:0;
top:0;
padding:0;
width:30%;
height:100%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
}
#content { margin-right: 200px; }
Its kind of an odd issue, but it seems its challenging to get the background color to stretch to the bottom of both columns, when using fluid layout.
I included the workaround along with a simple 2 column fluid layout.
Try this- jsFiddle
html, body {
margin:0;
padding:0;
background:silver;
/* workaround to get the columns to look even,
change color depending on which column is longer */
}
#sidebar {
position:absolute;
left:0px;
top:0px;
padding:0;
width:30%;
background:silver;
word-wrap:break-word;
}
#content {
position:absolute;
right:0px;
width:70%;
word-wrap:break-word;
background:gray;
}
I have the following issue with css and was wondering whether there is a way to solve it by setting an absolute height value. The code I have is as follows,
<style type="text/css" media="screen">
html { height:100%; }
body { background: black; height:100%; }
#menud {
position:absolute;
padding:1em;
height:300px;
background-color:#eaeaea;
width:184px;
}
#menue {
position:absolute;
margin-top:300px;
padding:1em;
height:900px;
width:184px;
background-color:red;
}
#data {
position:absolute;
margin-top:0px;
margin-left: 184px;
width:630px;
height:600px;
border-left:1px solid #dedede;
border-right:1px solid #dedede;
}
#ad {
position:absolute;
padding:1em;
margin-top:0px;
margin-left:814px;
width:186px;
background-color:red;
height:800px;
}
#content {
width:1000px;
background-color:white;
height:100%;
}
#info {
margin-top:0px;
width:1000px;
}
</style>
<html>
<body>
<div id='content'>
<div id='info'>
<div id='menua'>test</div>
<div id='menub'>test</div>
<div id='data'>test</div>
<div id='ad'>test</div>
</div>
</div>
</body>
</html>
I have set the height property to 100% but this does not cover the whole background white as one would expect it to. Any help on this would be appreciated.
Thanx.
Setting the height to 100% means 100% of the current viewport height. If your page is longer than the browser viewport, the div is too short. Use auto height to let the height get calculated correctly for you.
Set the height of content back to auto (remove height: 100%):
#content {
width:1000px;
background-color:white;
}
and remove the position: absolute from your ad (or replace with position: relative), so that the ad's height is respected when calculating the parent's (#content's) height:
#ad {
padding:1em;
margin-top:0px;
margin-left:814px;
width:186px;
background-color:red;
height:800px;
}
now your content is as long as you would expect.
100% height is relative to the container. To cover the whole background, you will have to use javascript. On page load you set the height to the window height.
You can use jQuery, to do this: in that case
$("#content").css('height', $(window).height());
You might have to remove paddings and margins from the body, like body { margin: 0; padding: 0; }, for the relative-positioned container div to cover the whole height.