I have a div that streatches the full height of the screen. I want to put three divs in there: header, content, and footer, with the header sticking to the top and footer to the bottom and content fitting in between. The solutions I've found to do this requires me to define a height for the footer and/or header, and then giving the center div a margin equal to the that height, which I want to leave undefined (they should stretch to fit their content). Is there a way to do this without using javascript?
When browser resizes, the footer and header should stay the same, and the center should shrink.
<html>
<head>
<style>
.stretchedToMargin {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
background-color: green;
}
</style>
</head>
<body>
<div class="stretchedToMargin">
<div>
Header (style="top:0") Indefinite height.
expands to fit content without scrolling.
</div>
<div>
Content
Fits between header and footer, using the pixels leftover
scrolling if needed
</div>
<div>Footer (style="bottom:0") Indefinite height.
expands to fit content without scrolling.
</div>
</div>
</body>
</html>
Using a table (since it appears this is not possible with CSS only) as follows also doesn't work. The long text spills out of the whole layout, no scrollbars appear...
<div class="stretchedToMargin">
<table style="height:100%;">
<tr>
<td style="height:1px;">Header</td>
</tr>
<tr>
<td><div style="height:100%; overflow:auto;">...Long text...</div></td>
</tr>
<tr>
<td style="height:100px">Footer</td>
</tr>
</table>
</div>
The simplest way is to use display:table on the wrapper and display:table-row on the section divs however as usual the lame duck IE 7 doesn't support it so just use an actual <table>. Yes, it's not semantic but thats a small trade-off really.
Related
I am trying to keep a fixed header in place on a web page and for the main content, when scrolled, does not move over the main header.
I am failing to understand why inline CSS works as expected but when switching the same CSS properties to an external style sheet, it fails to work. The external style sheet is being found as the first <div> has its properties set correctly. I have tried using both id and class on the second div but neither seem to work. This is the code using ids rather than classes.
index.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body style="height:100%; width:100%">
<div id="fixed-header">
<h1>Page Heading</h1>
</div>
<div id="main-content">
<!-- a number of articles and sections -->
</div>
</body>
</html>
css/style.css:
#fixed-header {
position:fixed;
height:100px;
top:0px;
overflow:hidden;
}
#main-content {
position:absolute;
top:100px;
left:0px;
right:0px;
overflow:auto;
}
There is no other CSS code.
If I change <div id="main-content"> to <div style="position:absolute; top:100px; bottom:100px; left:0px; right:0px; overflow:auto;"> it works.
What am I doing wrong?
This boils down to a basic understanding of CSS.
If you only specify the top of an absolutely positioned element, the rest of that element will size normally (its height will be the height of the content inside the element). When an absolutely positioned element is tall enough to go off the bottom of the screen, that creates a scroll bar in the body/html.
Putting the bottom property on your content limits the height of your content so the content container element itself can scroll individually of the body.
https://css-tricks.com/almanac/properties/p/position/
I think you are missing a big point here. This is the way a browser gives preference to the styles attached to a web page:
INLINE > ON-PAGE > EXTERNAL
So, you have to remove the inline css when you apply the external one.
And if you want to say get 100px as the result then in the external css file put height and width as 100px after height and width as 100%.
why??
it is because you fix the div with the 100px in the botton and you close the box if you want you gave to the div the width 0px left and 0px right nowyou can say to width 100% so you gaved him(the div) an width nov for the height you say stay 100px from the top of the view height and then you say stay 100px from the bottom so you "closed" the box and now your overflow can work correctly i hope that explained a little bit the why because of what
You must put the height to html tag too!
Look this jsfiddle
html, body {height:100%}
I have a basic 2-column layout with divs using the following html code:
<div ID="main">
<!-- body content -->
</div>
<div ID="sidepanel">
<!-- side content -->
</div>
and the following css code:
#main{
width:80%;
float:left;
overflow:hidden
}
#sidepanel{
width:18%;
float:right;
overflow:hidden
}
While the columns are done nicely for the most part, I have one problem. If my main content requires more than 80% of the screen width to be properly displayed, the remaining width is then clipped off. If I remove both overflow:hidden items, then the side panel content overlaps the body content. The only way I can see everything properly in either case is to use the web browser zoom out feature or increase screen resolution.
With tables, I can simply use this setup with no CSS:
<table>
<tr>
<td>
<!-- body content -->
</td>
<td>
<!-- side content -->
</td>
</tr>
</table>
and everything works fine.
Overall, I'd like a horizontal scrollbar available instead of clipping if the content in the main body is too wide for the screen.
Anyone know how to fix this while still making it compatible with IE7 without having to resort to tables for layout?
#main{
width:80%;
float:left;
overflow: scroll;
}
Or if you want to ensure that there is only a horizontal scrollbar, as overflow alone does it for both horizontal and vertical scrolling:
overflow-x: scroll;
As far as I know, overflow-x was supported in IE7, so you should be good to go with this.
I have a sidebar div to the left of my main content area and a footer below. How do I get my side bar div and main content div to both extend to my footer without filling it with content?
I think you are looking for the min-height CSS attribute. I don't know exactly how the markup is structured, but applying it to both divs (left and main), or a surrounding container should do it.
If you need it to work in older versions of IE, you should check out one of the CSS hacks like: http://www.dustindiaz.com/min-height-fast-hack/
Is this what you're looking for?
<div style="width:80%; margin:0 10% 0 10%">
<div style="background:red; width:20%; float:left">side</div>
<div style="background:blue; width:80%;float:right">main</div>
<div style="background:green; clear:both;">footer</div>
</div>
I need a sidebar and a content area. I want to have equal height for both sections. So if I want to specify a background color for the sidebar, it will follow the content area even if the sidebar's contents are not as tall as the content section and vice versa. I want to make this in pure HTML and CSS only, so no javascript tricks.
This excellent article on A List Apart builds such a layout from scratch, and also contains some interesting links to other articles on the subject, such as Faux Columns (also on ALA).
The only real way of doing this in a cross browser fashion is with tables.
As content is added to the sidebar cell below, it will force the entire row to expand which in turn will force the contentArea cell to expand as well. You can style those individually with css.
<style>
#sideBar { vertical-align:top;}
#contentArea { vertical-align:top;}
</style>
<table>
<tr>
<td id="sideBar">SideBar</td>
<td id="contentArea">content area</td>
</tr>
</table>
Basically just set the height of the sidebar to be 100% and it will follow the parent element's height. In the example below its the container element. No matter it's height, sidebar's height will be 100% and therefore always be same height as container.
<div id="wrapper">
<div id="container">
<div id="sidebar"></div>
</div>
</div>
<style>
#wrapper {}
#container {min-height:500px;} (or whatever you want for the height)
#sidebar {height:100%;}
</style>
How can I scale a div to 100% height and width inside of another element? In my case a sourrounding td. Since I'm a plugin I can not control the other HTML on the page. Here is my HTML:
<body style="height:100%;">
<table width="600px" height="400px" border="1">
<tr>
<td style="background-color:silver;">Cell 1</td>
<td style="background-color:silver;">
<div style="height:100%; background-color:yellow;">
<div style="min-height:100%; height:100%; background-color:red;">
Cell 2
</div>
</div>
</td>
</tr>
</table>
</body>
So, the Cell 2 div should be maximized. Is there a cross browser way to do this? Why is this so complicated?
Look at this stack overflow question as well ... after reviewing the top rated answer in that question, it looks like you have to set the height of the container to 100% and "min-height, height" of a child element to 100%.
Go to this website for more info - the HTML below is stripped-down version of the website
<div style="height:100%;">
<div style="min-height:100%; height:100%; background-color:red;">
put your content here
</div>
</div>
Using javascript / jquery you can easily get the height of the parent element and resize your div accordingly.
However, as the div is located in a table cell, the width is not fixed as the cell would expand and contract according to the contents of the other cells in the table. So there really is no correct width, the cell will adapt itself according to the contents of all cells.
By the way, your height problem would be easily solved setting it to 400px, but I guess the shown table structure is just an example (1 row, 400px height...).
Why bothing having a div within a div if its going to be 100% of the height and the width? Is there no other way of just using the containing div for your purpose?
It probably isnt working because height fails unless the containg element has some definite height applied to it.