in CSS i made that code:
body {
background-color:#f3f3f3;
max-width:1920px;
min-width:1024px;
margin:0 auto;
but to seperate the header from the content i would like to have a "bar" between them.
so i made:
#zig {
max-width:100%;
background-image:url(../img/zig.png);
background-repeat:repeat-x;
height:25px;
but the Bar doesn't go "unlimited" it just repeat till it reaches "1920px" can i somehow change that? to put
min-width:100%
didn't work
max-width:1920px; /* REMOVE ME */
if you want something to be max-width 1920 than use a container child (of body) element.
what way you #zag DIV will spann the full width of html, body which is dictated by the viewport width.
If #zag is a DIV (and it's not position absolute or fixed) than you need to set only it's height. min-width:100% is not needed since it already spans the full available width - being a block-level element.
html,body{height:100%;}
body{margin:0; font:16px/1 sans-serif;}
header, section, footer{
display:block;
margin: 0 auto;
max-width: 400px; /* you use 1920. 400 is for demo :) */
background:#eee;
}
.zag{
height: 50px;
background:#0fb;
}
<header>HEADER</header>
<div class="zag">ZAG</div>
<section>SECTION</section>
<div class="zag">ZAG</div>
<footer>FOOTER</footer>
If my browser window is large enough, the web page is fine. If it is smaller and I scroll to the right, my backgrounds don't go horizontally across the entire browser window. They stop inside the webpage. I have made the body background blue so you can see where the background is ending. I want to make it so the actual content and background pictures end where the browser window ends and have there be no blue. The site is up at avidest.com/schneer. Here is the CSS:
.main {width:100%; padding:0; margin:0 auto; min-width: 1020px;}
.header { background:url(images/slider_bgpng200.png); background-repeat: repeat-x; padding:0; margin:0 auto; width: 100%; }
.header .headertop{width: 100%; background: #d3e5e8; height: 30px;}
.block_header {margin:0 auto; width:1200px; padding:0; border:none; }
.slider { background: transparent; margin:0 auto; padding:0; height:420px;}
.slider .gallery { margin:0 auto; width:980px; height:420px; padding:0;}
And here is the html:
<div class="header">
<div class="headertop">
<div class="header_text">Email | Client Login </div>
</div>
<div class="block_header">
<div class="slider">
<div class="gallery">
</div>
</div>
</div>
</div>
Thanks.
You have contents that go beyond the .main div.
If you add in your div.main { overflow: hidden; } you will see that it works as expected, because nothing is pushing it to a bigger width than expected.
for 100% height, you need html and body tags to be 100% also
add this to your CSS
html, body { height: 100%; width: 100%; }
you would then have to create a fake background out of a 100% by 100% wrapper div and place your background within that to get the effect you are looking for
Why do you have .main class? Didnt you forgot some elements?
In your .header, you set up background and width 100%. so the width of element with .header class will be 100% of its parent element. Whats the parent element of <div class="header">?
I see a huge amount of variance in your widths. I would think "main" "header" "block_header" all would be the same width. Also note that 100% is not 100% of the parent element it is 100% of the window size especially when the parent element is larger than the window. Set the widths to a definitive numbers. If you want the content to fill the users screen then set the parent to 100% first and then all the child element can be set to 100% to fit the parent elements width.
I have an image I'd like to show in a browser such that:
If the image is smaller than the browser viewport, the image is centered
horizotally and vertically.
If the image is larger than the viewport, the image is scaled down to fill
as much of the viewport as possible without adjusting the aspect ratio of the
image. Again, the image is centered horizotally and vertically.
I do not want to use JavaScript; what's the best/most semantic HTML and CSS to do this?
Update I've been asked for clarification regarding semantics: the image is content; the only content within the HTML.
Solution
#GionaF ideas got me to a happy (and very simple) solution:
HTML
<!DOCTYPE html>
<head>
<title></title>
<LINK href="test2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<img src="photo.jpg" alt="photo" />
</div>
</body>
CSS
img {
max-width:100%;
max-height:100%;
position:absolute;
top:0; left:0; right:0; bottom:0;
margin:auto;
}
You can achieve it in many ways, but i can't be "semantic" without knowing the context (is the image the main/only content of the page? is it in the middle of a blog post?), so i'll go for a div.
1. position:absolute; + margin:auto;
Support: crossbrowser
HTML
<html>
<body>
<div id="container">
<img src="your-image.jpg">
</div>
</body>
</html>
CSS
html,body,#container {
height:100%;
}
#container {
width:100%;
position:relative;
}
#container > img {
width:100%;
max-width:400px; /* real image width */
position:absolute;
top:0; left:0; right:0; bottom:0;
margin:auto;
}
Demo
2. display:table; + display:table-cell; + vertical-align:middle;
Support: IE8+, all other browsers - with IE7 fallback (Source 1) (2) (3)
HTML
<html>
<body>
<div id="container">
<span> /* it's important that you use a span here
not a div, or the IE7 fallback won't work */
<img src="your-image.jpg">
</span>
</div>
</body>
</html>
CSS
html,body,#container {
height:100%;
}
#container {
width:100%;
display:table;
*display:block; /* IE7 */
}
#container > span {
display:table-cell;
*display:inline-block; /* IE7 */
vertical-align:middle;
text-align:center;
}
#container > span > img {
width:100%;
max-width:400px; /* real image width */
}
Demo
3. background-size:contain;
Support: IE9+, all other browsers - with vendor prefixes (Source 1) (2)
HTML
<html>
<body>
<div id="container"></div>
</body>
</html>
CSS
html,body,#container {
height:100%;
}
#container {
margin:0 auto;
max-width:400px; /* real image width */
background:url(your-image.jpg) 50% 50% no-repeat;
background-size:contain;
}
Demo
Be careful for how IE8 renders height:auto;, may not keep the ratio.
Edit: i just realized that you wrote "without adjusting the aspect ratio of the image". If you really don't want to keep the ratio, it's easier ... but do you really mean that?
You won't be able to accomplish this unless you have a set height for the container that houses the image. In order for the viewport to know where to have the image centered, it will need know the full height you are working with, as opposed to staying the same size as the image. Height will only expand if it is told to, or if there is actual content filling it up.
To center horizontally you will need to set a container around the image and give it a margin of '0, auto'. Set the image width to be 100% within the container (this will keep the proportions correct as the height will scale appropriately with it), and give the container a percentage based width as well.
You will need to give your image or surround div a set width and height for margin: auto to center the image. See how the code below works for you.
Css
#container {
width: 1000px;
height: 1000px;
}
#img {
background-color:#000;
width: 100px;
height: 100px;
margin: 0 auto;
}
HTML
<div id="container">
<div id="img">
</div>
Edit
Set image as background?
Then set the body to 100%.
body
{
background-image: url('background.jpg');
background-repeat: no-repeat; /* you know... don't repeat... */
background-position: center center; /*center the background */
background-attachment: fixed; /*don't scroll with content */
}
I wasn't able to find a perfect solution (from what I've read it's not possible to do what you want using only CSS and HTML). But I've found a solution closer to what you need. I repeat, it's not perfect. So here it goes (you actually put your image as a background for a div):
#mydiv {
width: 100%;
height: 100%;
position: relative;
background-image: url(photo.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: auto 98%, cover;
}
So, the key here is the background-size property. What it does here: force the image to scale (up or down) to a specified percentage of the width/height of the div/container (the width and height of the div is dictated by the viewport). For images bigger than viewport, this solution is good, but the problem is with smaller images (which are scaled up). Unfortunely, the current implementation of CSS doesn't permit to specify a max-height or max-width for the background-image. If you want to read more on this subject open this webpage: http://www.css3.info/preview/background-size/.
Anyway, a JavaScript solution is better. Hope it helps.
I have a header element and a content element:
#header
#content
I want the header to be of fixed height and the content to fill up all the remaining height available on the screen, with overflow-y: scroll;.
It this possible without Javascript?
forget all the answers, this line of CSS worked for me in 2 seconds :
height:100vh;
1vh = 1% of browser screen height
source
For responsive layout scaling, you might want to use :
min-height: 100vh
[update november 2018]
As mentionned in the comments, using the min-height might avoid having issues on reponsive designs
[update april 2018] As mentioned in the comments, back in 2011 when the question was asked, not all browsers supported the viewport units.
The other answers were the solutions back then -- vmax is still not supported in IE, so this might not be the best solution for all yet.
The trick to this is specifying 100% height on the html and body elements.
Some browsers look to the parent elements (html, body) to calculate the height.
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>
html, body
{
height: 100%;
}
#Header
{
width: 960px;
height: 150px;
}
#Content
{
height: 100%;
width: 960px;
}
Actually the best approach is this:
html {
height:100%;
}
body {
min-height:100%;
}
This solves everything for me and it helps me to control my footer and it can have the fixed footer no matter if page is being scrolled down.
Technical Solution - EDITED
Historically, 'height' is tricky thing to mold with, compared to 'width', the easiest. Since css focus on <body> for styling to work. The code above - we gave <html> and <body> a height. This is where magic comes into picture - since we have 'min-height' on playing table, we are telling browser that <body> is superior over <html> because <body> holds the min-height. This in turn, allows <body> to override <html> because <html> had height already earlier. In other words, we are tricking browser to "bump" <html> off the table, so we could style independently.
You can use vh on the min-height property.
min-height: 100vh;
You can do as follows, depending on how you are using the margins...
min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside element
The accepted solution will not actually work.
You will notice that the content div will be equal to the height of its parent, body.
So setting the body height to 100% will set it equal to the height of the browser window. Let's say the browser window was 768px in height, by setting the content div height to 100%, the div's height will in turn be 768px. Thus, you will end up with the header div being 150px and the content div being 768px. In the end you will have content 150px below the bottom of the page. For another solution, check out this link.
With HTML5 you can do this:
CSS:
body, html{ width:100%; height:100%; padding: 0; margin: 0;}
header{ width:100%; height: 70px; }
section{ width: 100%; height: calc(100% - 70px);}
HTML:
<header>blabablalba </header>
<section> Content </section>
For me, the next worked well:
I wrapped the header and the content on a div
<div class="main-wrapper">
<div class="header">
</div>
<div class="content">
</div>
</div>
I used this reference to fill the height with flexbox. The CSS goes like this:
.main-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
flex: 1;
}
.content {
flex: 1;
}
For more info about the flexbox technique, visit the reference
Please let me add my 5 cents here and offer a classical solution:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
<div id="idOuter">
<div id="idHeader" style="height:30px; top:0;">Header section</div>
<div id="idContent" style="top:36px; bottom:0;">Content section</div>
</div>
This will work in all browsers, no script, no flex. Open snippet in full page mode and resize browser: desired proportions are preserved even in fullscreen mode.
Note:
Elements with different background color can actually cover
each other. Here I used solid border to ensure that elements are placed
correctly.
idHeader.height and idContent.top are adjusted to include border,
and should have the same value if border is not used. Otherwise
elements will pull out of the viewport, since calculated width does
not include border, margin and/or padding.
left:0; right:0; can be replaced by width:100% for the same
reason, if no border used.
Testing in separate page (not as a snippet) does not require any
html/body adjustment.
In IE6 and earlier versions we must add padding-top and/or
padding-bottom attributes to #idOuter element.
To complete my answer, here is the footer layout:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}
<div id="idOuter">
<div id="idContent" style="bottom:36px; top:0;">Content section</div>
<div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>
And here is the layout with both header and footer:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}
<div id="idOuter">
<div id="idHeader" style="height:30px; top:0;">Header section</div>
<div id="idContent" style="top:36px; bottom:36px;">Content section</div>
<div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>
You can also set the parent to display: inline. See http://codepen.io/tommymarshall/pen/cECyH
Be sure to also have the height of html and body set to 100%, too.
The accepted answer does not work. And the highest voted answer does not answer the actual question. With a fixed pixel height header, and a filler in the remaining display of the browser, and scroll for owerflow. Here is a solution that actually works, using absolute positioning. I also assume that the height of the header is known, by the sound of "fixed header" in the question. I use 150px as an example here:
HTML:
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>
CSS:(adding background-color for visual effect only)
#Header
{
height: 150px;
width: 100%;
background-color: #ddd;
}
#Content
{
position: absolute;
width: 100%;
top: 150px;
bottom: 0;
background-color: #aaa;
overflow-y: scroll;
}
For a more detailed look how this works, with actual content inside the #Content, have a look at this jsfiddle, using bootstrap rows and columns.
In this instance I want my main content div to be liquid height so that the whole page takes up 100% of the browser height.
height: 100vh;
Unless you need to support IE 9 and below, I would use flexbox
body { display: flex; flex-direction: column; }
.header { height: 70px; }
.content { flex: 1 1 0 }
You also need to get body to fill the whole page
body, html{ width:100%; height:100%; padding: 0; margin: 0;}
CSS PLaY | cross browser fixed header/footer/centered single column layout
CSS Frames, version 2: Example 2, specified width | 456 Berea Street
One important thing is that although this sounds easy, there's going to be quite a bit of ugly code going into your CSS file to get an effect like this. Unfortunately, it really is the only option.
#Header
{
width: 960px;
height: 150px;
}
#Content
{
min-height:100vh;
height: 100%;
width: 960px;
}
The best solution I found so far is setting a footer element at the bottom of the page and then evaluate the difference of the offset of the footer and the element we need to expand.
e.g.
The html file
<div id="contents"></div>
<div id="footer"></div>
The css file
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
The js file (using jquery)
var contents = $('#contents');
var footer = $('#footer');
contents.css('height', (footer.offset().top - contents.offset().top) + 'px');
You might also like to update the height of the contents element on each window resize, so...
$(window).on('resize', function() {
contents.css('height', (footer.offset().top -contents.offset().top) + 'px');
});
Have you tried something like this?
CSS:
.content {
height: 100%;
display: block;
}
HTML:
<div class=".content">
<!-- Content goes here -->
</div>
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.