I'm making a little project-school website with x10Host, and I am writing my own custom HTML for it. The front page is going to have a little image explaining who I am and what I do. This is the image:
When I use the following HTML and CSS, it shows up perfectly (image shows):
HTML
<div class="jumbotron">
<img src="Jumbotron.png"></img>
</div>
CSS
.jumbotron{
position:relative;
min-width:100%;
min-height:100%;
top:-50px;
left:-50px;
}
.jumbotron img{
min-width:100%;
min-height:100%;
}
It shows up perfectly as this:
The only problem I am having is when I resize the window. Currently, the window is 1080p. If I resize it, this happens:
Is there any way I could modify the HTML or CSS to make the image resize to the client's screen? If you would like to see the full HTML code, the website is http://mrsquer.x10Host.com/.
You need to set max-width: 100%; height:100%; to limit it to the container's width but keep max image height.
.jumbotron{
margin-left:-10px;
margin-top:-10px;
height:100%;
min-width:100%;
position:absolute;
}
.jumbotron img{
height:100%;
width:100%;
max-width:100%;
}
try this for css
<!doctype html>
<html>
<title>css testing</title>
<style type = "text/css">
.jumbotron
{
position:relative;
width:100%;
max-width: 100%;
height:100%;
}
.jumbotron img
{
width:100%;
height: auto;
}
</style>
</head>
<body>
<div class="jumbotron">
<img src="Jumbotron.png"></img>
</div>
</body>
</html>
img height must be set to 'auto' or it will not scale correctly (as in code above).
This works for any size screen, but I wouldn't use it.
Setting the img as a background would give you more freedom to add content. And
height: 100%;
is not needed unless you want the entire screen occupied by the container div.
If you want a DIY site, maybe read-up on basic html and css. Have fun !
I have an image that I want to resize when the width of the page/screen changes.
This code almost does what I want:
.section
{
position:relative;
min-width:600px;
max-width:1200px;
height:auto;
margin-left:auto;
margin-right:auto;
overflow: hidden;
}
.image
{
position:relative;
display:inline-block;
vertical-align:top;
width:100%;
height:auto;
}
<div class="section">
<img src="long_img.jpg" class="image"/>
</div>
The problem is, the image is 2560px wide, and the section is only 1200px. The image gets squashed horizontally to fit, which scales the height down. But, when the page is at it's max width(1200) I want the image to be at full height(400). So I need the image to hang over the edge, but still automatically resize.
The reason I don't just crop the image is because I want to scroll it with a css animation.
I've tried .image{ margin-right:-1360; } but it had no effect.
Use a media query after the css that you have there. This will remove the 100% declaration and let the image be it's natural size.
#media(min-width:1200px) {
.section img {
width: auto;
display: block;
}
}
Also, take away the overflow:hidden from the containing div.
See this fiddle for an example.
So I'm trying to create a simple layering technique, by putting an image behind a video in html/css. To give the video section some meaning and background style.
Heres a photoshop mockup of what I'm trying to achieve.
http://s8.postimg.org/tl749vxvp/example.jpg
HTML
div id= "background">
img src="images/imgc.jpg" class="stretch" alt="image"
*Video embedding goes here*
CSS
.stretch {
width : 100%;
height: auto;%;
}
#background {
position: relative ;
}
#wrapper {
background-size: 100% auto;
}
You need to center the video player div over the image(or preferably, a div with a background image). Here's some html:
<html>
<head>
<!-- Flowplayer js and css -->
</head>
<body>
<div style="width:100%; height:100%; background-image:url('path/to/your/image.png');">
<div id="player" style="width:600px; height:400px; position:absolute; left:50%; margin-left:-300px; top:50%; margin-top:-200px"></div>
</div>
</body>
</html>
Note: that this css:
width:600px;
height:400px;
position:absolute;
left:50%;
margin-left:-300px;
top:50%;
margin-top:-200px
makes a div of 600px x 400px and centers it within the parent div. If you need to change the height to 800px for example, change margin-top to 1/2 of the amount, in this case -400px
I should mention that there are various css options for the background image of the main div, read about them here: http://www.w3schools.com/cssref/css3_pr_background.asp. You may want to look at background-size:contain
After you have the div centered over the image as desired, just follow the instructions here (http://flash.flowplayer.org/documentation/installation/index.html) to get your video playing with flowplayer.
I would use z-index, this allows you to set the vertical stacking
See: http://html.net/tutorials/css/lesson15.php
and
http://css-tricks.com/almanac/properties/z/z-index/
The easiest method would be to place the video in a div and set that div's CSS background-image property to the image you are trying to use:
HTML:
<div class="film-background">
*Video embedding goes here*
</div>
CSS:
.film-background {
background-image: url('url of your film image');
background-repeat: no-repeat;
}
OR you could use absolute positioning and z-index, and apply the style to the image instead of the container div:
HTML
<div>
<img src="img link" class="film-background">
*Video embedding goes here*
</div>
CSS
.film-background {
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
On my site a have a div, inside the div I have different images width different width's and height's. I want the image to be in the center no matter what size or shape. Lets say the div is 200px * 200px. All images need to have min-width:100%; and min-height:100%; so that there is no white in the background. So basically I want the center of the image to be in the center of the div. How do I do it?...
<!DOCTYPE html>
<html>
<head>
<style>
.div{
width:200px;
height:200px;
overflow:hidden;
box-shadow:0px 0px 5px #000;
}
.img{
/*What shall I put here?*/
min-width:100%;
min-height:100%;
}
</style>
</head>
<body>
<div class="div">
<img class="img" src="img.jpg">
</div>
</body>
</html>
You would be best setting the image as a background of the div and using setting the background position.
This is a duplicate question. The answer, as referenced here, is to display the image as a CSS background-image rather than using an img element and set it to display in the center:
div.with-background-image {
background: url(/path/to/image.jpg) no-repeat center center;
}
To ensure that your image is as least as large as its “containing” element you can use the background-size property, which accepts a number of different properties. The one you want is cover, which instructs the rendering engine to stretch the image so both dimensions of the image are at least equal to that of the element:
div.with-background-image {
background: url(/path/to/image.jpg) no-repeat center center;
background-size: cover;
}
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>