I am currently trying to build a website with a banner of a fixed height (100px) at the top, and I want the rest of the content to fill the rest of the page. I have it so that I have the banner is in a div, and the rest of the page in another div, and I want the rest of the page to be the height less 100px (100% - 100px). Obviously you cannot mix % and px when it comes to height. However, is it possible to define a variable to be the widow height (100%) minus the banner height (100px) and then use this to define the height of my remaining div.
I am new to css, html and hardly know any other languages, so please try to keep answers simple, as I am a simple person!
Height is dynamic so that as you add content to your "content section", so will the size of the contianer thats holding it.
The short answer is, dont set a height for your "content section".
<div style="height: 100px">
Your banner
</div>
<div>
Body
</div>
You can just use 100% as the height of your content div - it will stretch to take up the space from your banner to the bottom of the screen.
An important part is to set the height of html and body to 100%:
HTML
<html>
<head>
<title>Foo</title>
</head>
<body>
<div id="banner"></div>
<div id="content"></div>
</body>
</html>
CSS
#banner {
height: 100px;
background-color: #ccc;
}
#content {
height: 100%;
background-color: #000;
}
body {
height: 100%;
}
html {
height: 100%;
}
See demo here: http://jsfiddle.net/yHFjh/
Use window.innerHeight / document.documentElement.clientHeight property
<div id="banner">banner</div>
<div id="content">content</div>
<script>
if(navigator.userAgent.toLowerCase().indexOf("msie") > -1){
document.getElementById("content").style.height = document.documentElement.clientHeight - document.getElementById("banner").offsetHeight + "px";
} else {
document.getElementById("content").style.height = window.innerHeight - document.getElementById("banner").offsetHeight + "px";
}
</script>
Create a html and body of height 100%. Position the banner absolute. Add a content div below your banner and set it's min-height to 100%. This content will be behind the banner, but will be at least 100%. Add a div in the content with a padding-top of the height of the banner to prevent content to end up underneath the banner.
HTML:
<div id="banner"></div>
<div id="content">
<div id="main">
Lorem Ipsum is simply dummy text..
</div>
</div>
CSS:
html, body { height: 100%; }
#banner { position: absolute; height: 100px; width: 100%; background: green; }
#content { min-height: 100%; background: yellow; }
#main { padding-top: 100px; }
http://fiddle.jshell.net/pY6dc/
Related
I am trying to build a two-column page using twitter bootstrap responsive classes:
<div class="container">
<div class="row">
<div id="left" class="col-xs-7">
some article here
</div>
<div id="right" class="col-xs-5">
google map here
</div>
</div>
</div>
The left part will contain an article that may be long enough to exceed the height of the screen, and it will have its own scrollbar if that happens.
In the right part, I want to put google map with height that reaches certain margin above the bottom of the screen.
I've tried viewport height but when it has a navbar above the section I want the height to be viewport minus the height of the navbar (ex: 40px plus certain margin, say 10px below):
#left {
height: 100vh - (40px + 10px);
overflow-y: auto;
}
#right {
height: 100vh - (40px + 10px);
}
Thus i want only #left will have a scrollbar. Is there a simple way to do this?
Demo: http://jsfiddle.net/kw4qLrgr/1/
You can do it through JS by sizing your div.container and a little update to your css.
<script>
$(document).ready(sizeContent);
$(window).resize(sizeContent);
function sizeContent() {
var height = window.innerHeight - 90; //90 = The size of your header minus margins
$('.container').height(height);
};
</script>
#left {
overflow-y: auto;
height: 100%;
}
#right {
background-color: #ddd;
height: 100%;
}
Regards.
I have the following simple HTML and CSS:
<html>
<head>
<title></title>
</head>
<body>
<div style="width: 970px;">Text area</div>
<div style="height: 20px; background-color:gray; width: 100%; "></div>
</body>
</html>
I load this page in a browser. If the width of the browser is 400px (just an example), then I see a horizontal scroll bar in the browser screen bottom. If I move the scroll bar to the right, I can see that the background of the second div does not extend to the right.
I hope that the background color of the second div can extend from browser's left edge to the right edge (no matter what the width of the browser is).
How can I fix this?
Thanks!
You can solve like this:
<div style="width: 970px">
<div>Text area</div>
<div style="height: 20px; background-color:gray; width: 100%;"></div>
</div>
Whenever an element's explicitly set width is larger than the width of the body, the element overflows the body's boundaries. In other words, the browser will not adjust the width of the body, thereby restructuring an entire page layout, because one element spills over.
One solution is to make the div that follows the first div overflow as well.
Here's HTML:
<body>
<div>Text area</div>
<div></div>
</body>
CSS:
body > div:first-of-type {
width: 970px;
outline: 1px solid red;
}
body > div:last-of-type {
width: 100%;
height: 20px;
background-color: gray;
}
#media screen and (max-width: 970px) {
body > div:nth-of-type(2) {
width: 970px;
}
}
And, here's a fiddle: http://jsfiddle.net/8mK7f/.
I would suggest making sure the browser default CSS isn't interfering by using a CSS reset. http://meyerweb.com/eric/tools/css/reset/
This is because the body tag's width is the width of your browser window, and the 100% width on the second div is taking the width of the parent, which is the body tag. In your example this means the second div will only ever be 400px (the width of the browser window).
You'll have to set the width of the body tag to also be 970px in order for this to work. Setting body to 100% width won't solve it, because that will take 100% of it's parent width which is the html tag and will still be the width of the browser window.
<body style="width: 970px;">
<div style="width: 970px;">Text area</div>
<div style="height: 20px; background-color:gray; width: 100%; "></div>
</body>
EDIT: An alternative is to set the body to have display: inline-block which will force it to expand to the width of it's children:
<body style="display:inline-block">
<div style="width: 970px;">Text area</div>
<div style="height: 20px; background-color:gray; width: 100%; "></div>
</body>
When you use percentages in CSS, it only extends to the % of the parent element. In this example, make sure that the body element is 100% width as well.
Best of luck :)
Since you are hard coding the widths why not just set the width of the gray bar to the same as the div >Text Area< ?
e.g
<div style="width: 970px;">Text area</div>
<div style="height: 20px; background-color:gray; width: 970px; "></div>
So. My code is something along the lines of
<html>
<body>
<div id="header" style="width:100%;min-height:0;display:block;background-color:#000">
<img src="header_image.svg" />
</div>
<div id="content" style"display:block">
Some content
</div>
</body>
</html>
I have an svg in the header that I have set so that it matches the width of the window and the height scales to preserve the svg. Then I have the rest of the page in another div. I would like it so that the page doesn't scroll and this content div fills to fit the rest of the window. The problem is that since the height of the header changes with the width of the window, I can't set the content div in pixels or percentage or anything concrete.
How can I set the height of the content div to change dynamically with the height of the header?
I don't know Javascript or JQuery (I know, I know - I should), but ideally the height of the content div would be set to be something like height:(height of viewport)-(height of header), but I haven't a clue how to do this.
you don't have to use a script for that.
and also: I recommend you to separate your styling from your markup.
HTML
<div id="wrapper">
<div id="header">
<img src="header_image.svg" alt="the img is empty"/>
</div>
<div id="content">Some content</div>
</div>
add this to your CSS
html, body {
height: 100%;
margin: 0px;
}
/* this is the big trick*/
#wrapper:before {
content:'';
float: left;
height: 100%;
}
#wrapper {
height: 100%;
background-color: black;
color: white;
}
#header {
background-color:#000;
}
#content {
background-color: gray;
}
/* this is the big trick*/
#content:after {
content:'';
display: block;
clear: both;
}
Working Fiddle
Tested on: IE10, IE9, IE8, FF, Chrome.
didn't use absolute positioning
didn't use Script (Pure CSS solution)
fluid layout
cross-browser
Explanation:
with pseudo element, I'm creating a floating element (without content or width, so he's invisible)
that has 100% of the container height.
and with another pseudo element I'm creating a div just after the content div. (also without content, so he's also invisible) that has the clear attribute. so he has to be below the floated one I've created earlier. making the content to go all the way down.
I would like to build a fluid layout and would like to achieve something like
width:100%-200px;
i.e. have a div with content, call it div id="content" with a fixed margin on either side. I have tried to use the trick of putting the div id="content" into another div container with a margin, but I don't know how to fill out the background of div id="content". Is there a way of telling the div id="content" to use 100% of the available space as background, such that the width of the content plus the width of the margin does not exceed 100% of the browser window size?
Having the DIV set to be 100% with a margin of XXX on either side won't work as that will exceed the size of the browser window.
You could try the following:
body {
padding:0 2%;
}
#content {
width:96%;
}
http://jsfiddle.net/YYhvT/
Use position absolute...
#content {
position: absolute;
left: 0;
right: 200px;
}
See my Fiddle.
PS Advantage is that you don't need values on other elements.
You can put a container around the content and give it 200px left/right padding. This should do the trick (at least, from what I understand of what you are trying to accomplish). Also see this code example:
<!doctype html>
<html>
<head>
<style type="text/css">
body { margin: 0 50px; }
#container { padding: 0 200px; background: #FF0000; }
#content { width: 100%; background: #00FF00; }
</style>
</head>
<body>
<div id="container">
<div id="content">
Here goes my content
</div>
</div>
</body>
</html>
Note that the body margin is just for illustrating purposes, to let you see the background differences.
(I would post a jsFiddle, however I am not able to use it since I can only use IE7 at this point.)
here is my solution,
html:
<div id="content" class="content">
My Content
</div>
css:
.content {
position: absolute;
right: 100px;
left: 100px;
background-color:#A5112C;
}
and link to it: http://jsfiddle.net/MPYHs/
also if you want to put sort of image as a background I suggest you use small pattern like https://ssl.gstatic.com/android/market_images/web/background_stripes.gif
hope it helps,
regards
I have the following HTML to build a 900 pixel wide, centered page, with a header, footer and content section:
<body>
<div id="mainMaster">
<div id="main">
<form runat="server">
<div id="header">
</div>
<div id="content">
</div>
</form>
</div>
</div>
<div id="footer">
</div>
</body>
The layout is styled with the following (approx) CSS:
html, body
{
height: 100%;
}
#mainMaster
{
min-height: 100%;
background: url(../Images/Background.png);
}
#main
{
width: 930px;
margin: 0 auto;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
#header
{
}
#footer
{
background-image:none;
background-color:White;
position: relative;
margin-top: -80px; /* negative value of footer height */
margin-left: auto;
margin-right: auto;
width: 930px;
height: 80px;
clear: both;
}
#content
{
position:relative;
overflow:hidden;
height:100%;
background-image:none;
background-color:White;
}
The CSS was originally based on a layout I found on the internet for 'sticky footers'. It worked perfectly with a sticky footer, but then I came across these problems:
1) The 'content' is never stretched to full size. This is a big problem on some of my pages because internal controls are set to a height of 100%. Since content isn't stretched, the controls show up all squeeshed.
2) I just added a background image and colour. This background should not show up in the middle content panes. Because the 'content' isn't fully stretched I get the background image showing in the wrong places.
I prefer a CSS only fix for this (ie. no hacks or JS). Any help?
I would expect removing the #mainMaster <div> and moving its background image into #main's CSS would sort your problem out:
<body>
<div id="main">
<form runat="server">
<div id="header"></div>
<div id="content"></div>
</form>
</div>
<div id="footer"></div>
</body>
The problem you're running into is that #main's parent (#mainMaster) doesn't have an explicit height declared. Percentage heights only work properly when the elements parent has a height defined.
Try using min-height CSS property to set a minimum height for your content.
Adding a specific background color to #content and #header should prevent the background image from displaying in those areas. Not sure why the content isn't filling up the area, when you say "stretched" do you mean to a height of 100%? Browsers won't recognize a height of 100% without using js.