How can I have my first div always be full-screen (of the browser not computer), and then supporting divs show underneath.
I want to replicate the layout of this site
http://checklandkindleysides.com
In the simplest form, I just want:
First section to be full height and width of window
Supporting content to be a specific size and not full-screen
Thanks
You need to give the html, body and full height div a height of 100%.
CSS
html,
body {
height: 100%;
}
body {
padding: 0;
margin: 0;
}
.full-height-content {
height: 100%;
overflow-y: auto; /* margin overflow fix */
}
HTML
<div class="full-height-content">
This is your full height content
</div>
<div class="page-content">
<p>This is your standard page content</p>
</div>
Here is a codepen:
http://codepen.io/anon/pen/aNyQJm
Related
I want my background to be full screen with 100vh but i also want it that if I minimize the screen vertically that the background stays at the end of the picture that is on the background
header{background: #efe0d9; display: inline-block;width: 100%; float: left; height:100vh;padding: 1% 0 0;}
I want to have a background that ends at the bottom of the screen becase then the picture that is on the screen is big enough but when I minimize the screen vertically the pictures stay the same size (as wanted) but the background also goes up so the pictures are overlapping with next part of the websiteenter image description here
Have you tried setting min-height?
Edit: This may not be exactly what you're looking for, since I had to add an extra element, But you could try wrapping the <header> in a container with its height set to 100vh, making the header's contents take up the minimum height you want to cover, and giving the same background color to the wrapper and the header.
Check the snippet and toggle to full screen to see the background expand beyond the header's contents.
#container {
background: #efe0d9;
height: 100vh;
}
header {
background: #efe0d9;
width: 100%;
}
.stack {
height: 100px;
text-align: center;
}
body, p, hr {
margin: 0;
}
<div id="container">
<header>
<div class="stack"><hr><p>0px</p></div>
<div class="stack"><hr><p>100px</p></div>
<div class="stack"><hr><p>200px</p></div>
<div class="stack"><hr><p>300px</p></div>
<div class="stack"><hr><p>400px</p></div>
<div class="stack"><hr><p>500px</p></div>
</header>
</div>
Edit: Adding a container div with its height set to 100vh and display set to flex, and giving the header a min-height seems to have done the trick. Here's an updated fiddle.
I've put a codepen example to explain:
http://codepen.io/djnutron/pen/gPJzGJ
Basically, I'm wondering why the html and body tags will not go full width. My screen is 1920x1080, but the html tag refuses to be 1920 - it always goes to 1903 for some reason? Any idea why? Also the parent div of the img tag is adding some padding somewhere - because the img is 1900 wide and the surrounding div goes to 1903? Im wondering where this padding is coming from? Ive tried adding display:block, and also vertical-align:top to the image, but no dice...
Here's the code:
HTML
<div class="gallery" >
<div class="gallery-cell">
<div class="innerG">
<img src="http://lorempixel.com/image_output/animals-q-c-1900-850-2.jpg" />
</div>
</div>
<div class="gallery-cell">Lorem ipsum dolor sit</div>
</div>
CSS
html, body {
padding: 0;
margin: 0;
}
* {
box-sizing: border-box;
}
.gallery-cell {
padding: 0;
margin: 0;
}
I believe this is the case:
The scrollbar is 17 pixels wide
Also the div you have called "innerG" is display block, so it has the width of the full page. No padding is hidden anywhere. :)
Just zoom out and you will see that it's size is changing to match the screen width
If you want to have full body width all the time, you can set this in CSS:
html, body {
padding: 0;
margin: 0;
min-width: 1920px;
}
You could try to set both your HTML and Body to width: 100%;
Is there any content that is longer than the window's height? If so, might be the scroll bar as Silviagreen said.
Is there a way for my main div to have an initial width of 1024px but be able to expand based on the content if the content is longer that 1024px?
Also, the possible contents are dynamic, so if the content is longer than 1024px, then the main div must expand to accommodate the content. But if the content is smaller than 1024, then it should remain as 1024px centered on the screen.
HTML
<div id="main">
<h1>Title</h1>
<div id="otherContent">
<!-- other content here -->
</div>
</div>
CSS
#main {
width: 1024px;
margin: 0 auto;
}
Here is a fiddle with examples (Examples are based on 600px instead of 1024px)
Edit: The main div is also centered using margin.
#main {
min-width: 1024px;
}
The min-width property is what you're looking for a I believe:
#main {
min-width:1024px;
}
Set the min-width of main div to 1024px
HTML
<div id="main">
<h1>Title</h1>
<div id="otherContent">
<!-- other content here -->
</div>
</div>
CSS
#main {
min-width: 1024px;
}
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.
Can anyone help me with position my content block?
It looks good if there are a lot of content, but not when window higher than content block.
Actualy I need that "content" block on my picture teked all free space (height) and thats why footer stick to the bottom.
I have next HTML markup:
<div>
<header></header>
<nav class="breadcrumbing"></nav>
<section class="left_nav"></section>
<section class="content"></section>
<footer></footer>
</div>
With this CSS:
html,body{width:100%;margin:0;padding:0;}
body{background-color:#629302}
body>div{width:400px;height:100%;margin:0 auto;background-color:#FFF;}
body>div>header{height:50px;background-color:#9dc155}
body>div>nav.breadcrumbing{display:block;height:10px;margin:0;padding:0;}
body>div>section.left_nav{width:172px;margin:8px 20px;float:left;background-color:#cdef88}
body>div>section.content{width:168px;float:left;}
body>div>footer{padding:19px 19px 22px;background-color: #e58b04;clear:left;}
I allready tried answers from Is it possible to get a div's height to be 100% of an available area? and some same questions but with no luck.
ALso my live HTML has backgroun-images, so I can't just put footer to the bottom with position:absolute.
There I post my HTML to preview: jsfiddle.
UPD: scaled live preview:
You will have to set the html and body height property to 100%; then you can set the footer height to 100%; this will tell the main container elements the real meaning of 100% and it will work.
Your updated fiddle
Basically, these are the rules you have to add:
html, body {
height: 100%;
}
footer {
height: 100%;
}
Update
Ok, I might have misunderstood your requirements, here is a cleaner example:
Working example
Basically, what you additionally do in this example is having your wrapper element display:table with an height: 100%, then you make your footer display as table-row.
Important note: This solution uses display-table which is compatible only for IE8+. If supporting IE7 is an issue for you, then you have two solutions that I can think of out of my head:
Either you use a fixed-width footer, push it below the content and then pull it back with a combination of negative margin and padding.
Or you fallback to support of older browser by putting your footer in position using some javascript.
This the breakdown of the code:
HTML
<div class="wrapper">
<header></header>
<section class="main-content">
{child elements of your main-content area}
</section>
<footer></footer>
</div>
CSS
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: table;
margin: 0 auto;
height: 100%;
}
.main-content {
display: table-row;
height: 100%;
}
footer {
display: table-row;
}
Here's an updated fiddle
The crux of this is setting the body to be absolutely positioned to the viewport. From there, if you wanted to allow it to scroll as you normally would, then you would change the footer's position to fixed and the content div's CSS to this:
body>div>div{width:400px;height:100%;margin:0 auto;background-color:#FFF;
position:absolute; top: 0; bottom: 0; overflow-y:auto;}
I've wrapped your content div in another to allow for the automatic margins to center your page, and then defined the footer's box sizing as border-box to account for the padding you're adding to it as well.