I have two divs on a page. a grid-container that takes a background and an internal grid that needs to be positioned in the center of the other grid. My css:
html, body{
margin:0;
padding:0;
width:100%;
}
#grid-container{
background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left;
width:100%;
}
#grid{
width:1140px;
margin:0px auto;
}
At this point, the bg image of the #grid-container only fills the window, not the full width of the html. The symptom of this is that if you narrow the browser window so that a horizontal scrollbar is required and refresh the page, the bg image ends where the browser window ends. When I scroll to the right, the bg image is not there. Ideas?
EDIT: ok, per requests, I've edited my css/html. When I remove the width designation in the #grid-container, it shrinks to the width of the container within, which is even worse. Here's what I have now:
html, body{
margin:0;
padding:0;
min-width:1140px;
}
body{
background:url(../images/page-background.jpg) repeat-x top left !important;
height:100%;
}
#grid-container{
background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left;
padding-top:1px;
}
#grid-container2{
width:1140px;
margin:0px auto;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
and the html:
<!DOCTYPE HTML>
<html>
<head>
---
</head>
<body>
...
<div id="grid-container" class="clearfix">
<div id="grid">..all kinds of things in here</div>
</div>
The problem is caused by your #grid having a width:1140px.
You need to set a min-width:1140px on the body.
This will stop the body from getting smaller than the #grid. Remove width:100% as block level elements take up the available width by default. Live example: http://jsfiddle.net/tw16/LX8R3/
html, body{
margin:0;
padding:0;
min-width: 1140px; /* this is the important part*/
}
#grid-container{
background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left;
}
#grid{
width:1140px;
margin:0px auto;
}
html, body{
width:100%;
}
This tells the html to be 100% wide. But 100% refers to the whole browser window width, so no more than that.
You may want to set a min width instead.
html, body{
min-width:100%;
}
So it will be 100% as a minimum, bot more if needed.
Remove the width:100%; declarations.
Block elements should take up the whole available width by default.
Related
I am trying to build a layout that has two div blocks next to each other. Both of them are centered to the page. The left block (1) varies in width depending on how much space their is available in the window (from 300px min to 400px max). Block 2 has a fixed width of 640px and does not change. Both block's height extend to the bottom of the page. If one block is longer than the other than the other block would compensate with white space (with the background color still applied).
Youtube's video page can be used as an example, however in my case the larger block is on the right. Notice how youtube's right block (suggested videos) gets larger or smaller from 300-400px when the window is resized.
This is the best I can come with:
http://jsfiddle.net/7dL5z/
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
max-width:1040px;
min-width:940px;
margin:0 auto;
height: auto;
min-height: 100%;
}
#left {
float:left;
min-width:300px;
max-width:400px;
height:100%;
background:#EEE;
}
#right {
float:right;
width:640px;
height:100%;
background:#666;
}
<html>
<body>
<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
</html>
Two problems:
1) I can't get the divs to extend to the bottom.
2) Adding a float to block 1 renders the min-width property useless
I am looking for a JS and CSS media query free solution if possible.
Any one have a clue?
A few things:
You need to add
html {
height:100%;
}
to get html's sub elements to fit the window. Then remove height:auto from the wrapper.
If you have a max-width set in pixels on the wrapper without telling it a variable width relative to the window (like width:90%), the contents can't change size when the browser resizes, because their width is fixed.
So I added width:90% for demo purposes. You can set it to whatever percentage you think looks nice in the window.
Put your right div before your left in your html like so:
<div id="wrapper">
<div id="right">right</div>
<div id="left">left</div>
</div>
and then you can use left to fill the space left by right without having to float it or tell it a width. Setting the max & min width on the wrapper will keep left from getting too small or big.
So the final css would be:
html, body{
margin:0;
padding:0;
height:100%;
}
#wrapper {
max-width:1040px;
min-width:940px;
margin:0 auto;
height: 100%;
width:90%;
}
#left {
overflow:hidden;
height:100%;
background:#EEE;
}
#right {
float:right;
width:640px;
height:100%;
background:#666;
}
Here is one way of doing it using display: table-cell.
html {
height: 100%;
}
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
margin:0 auto;
height: 100%;
display: table;
min-width: 940px;
}
#left {
display: table-cell;
height:100%;
min-width: 300px;
max-width: 400px;
background:#EEE;
}
#right {
display: table-cell;
width: 640px;
height: 100%;
background:#666;
}
To get the panels to extent to 100% of the browser height, you need to set the height on the html element.
The behavior may be close to what you need.
See demo at: http://jsfiddle.net/audetwebdesign/ZVN97/
Something like this http://jsfiddle.net/pmj7Z/ maybe?
html, body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
max-width:1040px;
min-width:940px;
margin:0 auto;
height: 100%;
}
#left {
display: block;
float: left;
min-width:300px;
max-width:400px;
height:100%;
background:#EEE;
}
#right {
float: right;
width:640px;
height:100%;
background:#666;
}
My solution is set wrapper to display: table & its childs to display:table-cell.
Both areas will expand bottom when one of them overflow the screen size. If not, both will expand to bottom (100%).
http://jsfiddle.net/7dL5z/4/
HTML:
<body>
<div id="wrapper">
<div id="left">
<p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p>
</div>
<div id="right">right</div>
</div>
</body>
CSS:
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
display: table;
height: 100%;
margin:0 auto;
max-width:700px;
min-width:500px;
width: 100%;
}
#left {
background:#EEE;
display: table-cell;
max-width: 300px;
min-width: 100px;
width: 40%;
}
#right {
display: table-cell;
background:#666;
}
If you use jQuery, here is my answer:
$(document).ready(function() {
layoutInit();
$(window).resize(function() {
layoutInit();
});
function layoutInit() {
// you can also hard code the max-width and min-width in the javascript,
// following function is used to remove "px" on "1040px"-like strings from CSS
var pxStriper = function(str) {
return str.substr(0, str.length - 2);
}
// all parameters you need to update the layout:
var bodyWidth = $("body").width(),
bodyHeight = $("body").width(),
wrapperMaxWidth = pxStriper($("#wrapper").css("max-width")),
wrapperMinWidth = pxStriper($("#wrapper").css("min-width")),
rightWidth = pxStriper($("#right").css("width"));
// 3 different situations with width of the body:
if (bodyWidth <= wrapperMaxWidth && bodyWidth >= wrapperMinWidth) {
// 1:
$("#wrapper").css('width', bodyWidth);
$("#left").css('width', bodyWidth - rightWidth);
} else {
if (bodyWidth > wrapperMaxWidth) {
// 2:
$("#wrapper").css('width', wrapperMaxWidth);
$("#left").css('width', wrapperMaxWidth - rightWidth);
} else {
// 3:
$("#wrapper").css('width', wrapperMinWidth);
$("#left").css('width', wrapperMinWidth - rightWidth);
}
}
// update the height:
$("#wrapper").height(bodyHeight)
}});
I have a simple 4-panel webpage set up mostly using divs and css. The panel divs are header, footer, menu, and content. The menu and content are supposed to be parallel columns with the same height.
Everything works fine until I put an iframe inside the content div. The content div then becomes taller than the menu div, even when I set them to the same height. I know that the iframe is the reason because this doesn't happen when I take out the iframe, but it's the content div - not the iframe - that actually is too tall.
How can I fix this? Some similar questions have been asked, but the proposed solutions didn't work for me, unless I was doing something wrong. Here's my complete code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
body {
margin: 0;
padding: 0;
}
#header {
background-color: #7D110C;
height:100px;
}
#menu {
float:left;
width:300px;
background-color: lightGrey;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
}
#content {
margin-left:300px;
background-color: white;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
}
#content iframe{
width:100%;
border:none;
margin: 0;
padding: 0;
background-color: pink;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
}
#footer {
clear:both;
background-color: #7D110C;
height:100px;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="menu"></div>
<div id="content"><iframe id="content_iframe" name="content_iframe"></iframe></div>
<div id="footer"></div>
</body>
<script type="text/javascript">
console.log( $('#content').css('height') );
console.log( $('#content_iframe').css('height') );
</script>
</html>
height:auto !important; overrides height:500px; in #content and in #content iframe. If you get rid of the height:auto !important; in both CSS classes, it works fine. jsFiddle
Ok here's the real fix, just leave everything as is and add display: block to #content iframe. That fixes it. An iframe is an inline frame, hence the extra white space. Updated jsFiddle
For modern browsers you can try this:
add position:relative to #content
remove width, height, min-heigth from #content iframe and add this instead:
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
No idea what to do for IE 5 and 6, though.
If you set a fixed height:500px; and the iframe is taller than this, you will get a scrollbar on the side.
If you want a fixed height at all times, remove both height: auto !important and min-height: 500px and leave only height:500px.
height-auto: The browser calculates the height. This is default.
min-height: Defines the minimum height
The following will make menu and content have the same height at all times.
HTML
<div id="wrapper">
<div id="menu"></div>
<div id="content"><iframe id="content_iframe" name="content_iframe"></iframe></div>
</div>
CSS (Just add this to the already existent)
#wrapper { display: table; }
#menu { display: table-cell; } /* Remove the float */
#content { display: table-cell; } /* Remove the float */
Note, this won't work on IE7 and below though. Either you'll have to use fixed height for both menu and content or javascript.
I have two columns for my website and right now the background color ends at the last piece of content in the left column (which is for navigation).
I've tried height:100%, min-height:100%; etc. Doesn't seem to work. here's the css.
.container {
width: 100%;
height:100%;
min-width: 960px;
background: #fbf6f0;
margin: 0 auto;
overflow: hidden;
}
#sidebar1 {
float: left;
position:absolute;
width: 20%;
height:100%;
min-width:220px;
background: none repeat scroll 0% 0% #007cb8;
z-index:9999;
}
Use viewport height - vh.
.container {
height: 100vh;
}
Update
Please note, there are potential issues with using VH on Safari iOS. See this thread for more information: Chrome / Safari not filling 100% height of flex parent
Set the body height too
body,html{
height:100%;
}
div {
height:100%
}
The reason the div doesn't fill the entire window by default if because it's parent, the <body> tag probably, only stretches as heigh as it needs to. Add this at the top of your stylesheet (I like to order styles in a similar order to that of the tags in the markup):
html, body {
height:100%;
min-height:100%;
}
edit: grammar
overflow-y: auto;
This css code is for your solution.
I want to create an HTML page which:
Appears centred horizontally
Has a white background the entire height of the window
Contains a fixed header and scrollable content
I am having two issues related to {width: 100%} and {height: 100%}.
My header is 100% of the page width, when I expect it to be 100% of its parent width.
The background appears at 100% of the window height, but it then scrolls up with the content.
I would appreciate any help in understanding how CSS treats the 100% value in these two cases. I am not asking for a workaround: I already have that. I am asking for insights into the way CSS thinks.
Many thanks in advance,
James
Here's a demo of the issue
And here's the barebones HTML:
<!DOCTYPE html>
<head>
<title>Width & Height 100%</title>
<style>
html {
height:100%;
}
body {
background: #666;
height: 100%;
margin: 0;
}
#container {
position: relative;
height:100%;
background: white;
width: 400px;
margin: 0 auto;
padding: 0 0;
}
#header {
position:fixed;
z-index:100;
background:#ffe;
/* width:760px; */
width:100%;
height:64px;
}
#content {
position: absolute;
left:20px;
width:360px;
height:360px;
margin:64px 0 0 0;
background:#efe;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
Fixed header
</div>
<div id="content">
Scrollable content
</div>
</div>
</body>
</html>
All of these fixed positions are going to give you headaches.
About the widths: the box model is usually the problem. I start every CSS with body height and width set to 100%, and then reset my box model so it matches across browsers, and applies all of my padding to the inside of a box instead of the outside:
/* Set box models to match across browsers. */
* {
box-sizing:border-box;
-moz-box-sizing:border-box;
webkit-box-sizing:border-box;
max-width:100%;
}
Then set your width on a container using padding, first the mobile width, then the screen width to override:
#container {
padding: 0px 10px;
}
#media only screen
and (min-width : 700px) {
#container {
padding: 0% 30%;
}
}
For a full layout, you can visit my site:
http://instancia.net/fluid-sticky-footer-layout/
I should probably add the mobile bit to that page. :)
Fix header
Change the header position fixed to position absolute
Fix content height
* {
margin: 0;
}
html, body {
height: 100%;
}
#container{
min-height: 100%;
height: auto !important;
height: 100%;
background:#efe;
}
#content {
padding: 64px 20px 0;
}
Live example with pos fixed
http://jsfiddle.net/qB4sD/1/
I have tried on my own for such a long time and all the posts I have read and googled so far have not helped me, so I hope one of you guys can give me a hint:
I have a Layout consisting of a header, a footer, and a content. This layout streches over the whole page in height (which has already taken me a while to figure out). So far, so good. But now I want to stretch the content-div as far down as possible, down to the beginning of the footer. No matter what I do, it does not work, it either stays the length of the text in it, or it becomes the size of the whole window, hiding the footer and generating a scrollbar.
I read about a solution making it position:absolute, but I don't want that.
Here is the example: http://jsfiddle.net/N9Gjf/1/
You would really help me out!
Here is the css:
html, body {
height:100%;
text-align:center;
}
#wrapper {
min-height:100%;
height:100%
overflow: hidden;
width:800px;
margin: 0 auto;
text-align: left;
background-color:lightblue;
}
#footer {
background-color: silver;
height:1.5em;
width:800px;
margin: -1.5em auto;
}
#header {
background-color: orange;
height:100px;
}
#content {
background-color: limegreen;
}
* {
margin:0;
padding:0;
}
And here is the html:
<div id="wrapper">
<div id="header">
<p>Header</p>
</div>
<div id="content">
INHALT
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
http://jsfiddle.net/calder12/CprV7/
You had a missing semi-colon after height in the wrapper. You want to set the height and min-height of the content to 100% as well.
#wrapper {
min-height:100%;
height:100%;
overflow: hidden;
width:800px;
margin: 0 auto;
text-align: left;
background-color:lightblue;
}
#content {
background-color: limegreen;
height:100%;
min-height:100%;
}
I think relative-absolute positioning is the best solution (I admit I am unable to find a way to make the heights sum up to 100%). Here is what you need to do:
Demo #1
Make the wrapper position relative
Put all divs inside the wrapper
Use absolute positioning to position and size content and footer; use one of the following:
Do not specify height of the div; specify top and bottom
Specify either top or bottom but not both; specify height
Alternate method is to use negative margins. This could be a brain twister but once you grasp the idea it becomes mush simpler than positioning. Here is what you need to do:
Demo #2
Assign heights to header and footer
Assign 100% height to content
Use negative margins on content so that (i) content pushes itself over the header (ii) pulls footer over itself
Use z-index positioning to bring header in "front" of content
Use a padding div to push the stuff inside the content div below the header
#wrapper {
min-height:100%;
height:100%; /*missed the semicolon here*/
overflow: hidden;
width:800px;
margin: 0 auto;
text-align: left;
background-color:lightblue; position:relative
}
Now it works DEMO
You have an error with the wrapper:
#wrapper {
min-height:100%;
height:100%;
overflow: hidden;
width:800px;
margin: 0 auto;
text-align: left;
background-color:lightblue;
}
You forgot to put a ; at the end of height:100%.
Try it and you will see that it will work