I have this template in my mind
And i dont know how i can implement second "stretchy div". It must fill with his height all remaining space on the screen (not bigger, because I don`t want to see y-scroll). Is it possible?
viewport units and calc make this simpler.
* {
margin: 0;
padding: 0;
}
.one {
height: 50px; /* demo height */
background: red;
}
.two {
height: calc(100vh - 50px);
background: blue;
}
<div class="one"></div>
<div class="two"></div>
EDIT: Flexbox version
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
}
.one {
height: 50px;
background: red;
}
.two {
background: blue;
flex-grow: 1;
}
<div class="one"></div>
<div class="two"></div>
Check out this fiddle. Hope it helps!
HTML -
<div id="wrapper">
<div id="first"></div>
<div id="second"></div>
</div>
CSS -
html, body {
width:100%;
height:100%;
margin:0;
}
#wrapper {
width:300px;
height:100%;
position:relative;
}
#first {
width:300px;
height:200px;
background-color:#F5DEB3;
}
#second {
position:absolute;
top:200px;
bottom:0;
left:0;
width:300px;
background-color:#9ACD32;
}
use resize event of javascript window object.Listen for this event then we have to update our visual elements(div..etc) manually.
You say you want a "stretchy" second div, which my example shows.
.firstDiv {
height: 400px;
}
.secondDiv {
height: 100%;
}
The second div must have content in it or it will not be seen, however the height of it will be determinant on what is inside the div, so it will stretch as you need.
.div1{
height:400px;
z-index:1;
}
.div2{
height:100%;
position:relative;
top:-400px;
z-index:-1;
}
Related
I need all divs to be 100% document height. It works till some of them has a top margin. In this case remaining divs loses its full height.
How can I stretch all div's height to full document height, regardless of margin of any of them?
* {
.margin: 0;
}
html {
background: red;
height: 100%;
}
body {
max-width: 1366px;
background: blue;
height: 100%;
}
#divleft {
float: left;
background: lightblue;
width: 40%;
height: 100%;
}
#divmiddle {
float: left;
margin-top: 25px;
background: lightgreen;
width: 40%;
height: 100%;
}
#divright {
float: right;
background: green;
width: 20%;
height: 100%;
}
<div id='divleft'>left</div>
<div id='divmiddle'>middle</div>
<div id='divright'>right</div>
Here is the fiddle
You don't necessarily need height: 100% for your divs to be full height. You can achieve this layout, making the divs fully dynamic, with CSS flexbox.
All you need is display: flex on the container.
You can get rid of all float rules and don't need to use calc().
html {
background: red;
height: 100%;
}
body {
display: flex; /* NEW */
max-width: 1366px;
background: blue;
height: 100%;
}
#divleft {
background: lightblue;
width: 40%;
}
#divmiddle {
margin-top: 25px;
width: 40%;
background: lightgreen;
}
#divright {
width: 20%;
background: green;
}
<div id='divleft'>left</div>
<div id='divmiddle'>middle</div>
<div id='divright'>right</div>
revised fiddle
An initial setting of a flex container is align-items: stretch. This means that child elements of the container (aka "flex items"), will consume the free space in the cross-axis, which in this case is vertical / height.
You can use CSS calc() function, like:
#divmiddle{
margin-top: 25px;
height: calc(100% - 25px);
}
Have a look at the snippet below (let me know if this works for you):
html{
background:red;
height:100%;
}
body{
max-width:1366px;
background:blue;
height:100%;
margin: 0;
}
#divleft{
float:left;
background:lightblue;
width:40%;
height:100%;
}
#divmiddle{
float:left;
margin-top:25px;
background:lightgreen;
width:40%;
height:calc(100% - 25px);
}
#divright{
float:right;
background:green;
width:20%;
height:100%;
}
<body>
<div id='divleft'>left</div>
<div id='divmiddle'>middle</div>
<div id='divright'>right</div>
</body>
Hope this helps!
Just remove margin property from middle div..
#divmiddle{
float:left;
background:lightgreen;
width:40%;
height:100%;
}
You can simply deduct the margin percentage from the height. Instead of height: 100%, use something like width: 98%; height: 98%; margin: 1%; or width: 23%; height: 23%; margin: 1%;, etc.
Like the question says, I can't float anything to the bottom... I tried float:absolute and it showed that. There's supposed to be 5 different boxes, but it only shows one of them. This is my code:
html,
body {
height: 100%;
}
#one,#two,#three,#four,#five {
margin:0;
padding:0;
float:left;
display:inline-block;
height:50%;
width:20%;
bottom:0;
right:0;
left:0;
position:absolute;
}
div {
margin:-2px;
padding:-2px;
}
#container {
display: inline-block;
width: 100%;
height: 100%;
position: relative;
}
#one {
background-color: blue;
}
#two {
background-color: green;
}
#three {
background-color: yellow;
}
#four {
background-color: orange;
}
#five {
background-color: red;
}
<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>
<div id="four">
</div>
<div id="five">
Thanks in advance :)
Your code's not working because you've essentially set all 5 boxes to stack on top of each other by having absolute positioning, 0 margin and left set to 0 for all 5 boxes, so everything takes the same positioning on the bottom left corner of the screen. If you remove right:0 and add an individual left property for each box, you should be able to have all 5 boxes in a neat row at the bottom, like so:
html,
body {
height: 100%;
}
#one,#two,#three,#four,#five {
margin:0;
padding:0;
float:left;
display:inline-block;
height:50%;
width:20%;
bottom:0;
left:0;
position:absolute;
}
#container {
display: inline-block;
width: 100%;
height: 100%;
position: relative;
}
#one {
background-color: blue;
left:0;
}
#two {
background-color: green;
left:20%;
}
#three {
background-color: yellow;
left:40%;
}
#four {
background-color: orange;
left:60%;
}
#five {
background-color: red;
left:80%;
}
jsfiddle: https://jsfiddle.net/hq2hv1pw/
Also on a side note, I'd combine the selector with a class for the CSS style that has 5 IDs haha.
Hope this helps you out
This is my code:
<style >
html,body {
height:100%;
margin:0;
background:red;
}
#main {
height:100%;
background:yellow;
}
h1 {
margin:0;
}
</style>
<body >
<div>
<h1>Header</h1>
</div>
<div id="main">
Adjust the height
</div>
</body>
I want div main to cover the whole viewport without extending the screen further to the bottom. With the above code, a vertical scrollbar appears because we exceed the viewport height. How may I oblige #mainto stop exactly at the bottom of the viewport?
You could give a height to <h1> and based on it calculate the height of body.
html,
body {
height: 100%;
margin: 0;
background: red;
}
#main {
height: calc(100% - 35px);
background: yellow;
}
h1 {
margin: 0;
height: 35px;
}
<div>
<h1>Header</h1>
</div>
<div id="main">
Adjust the height
</div>
You may use flex to make this easy :
body {
display: flex;
flex-flow: column;
}
html,
body {
height: 100%;
margin: 0;
background: red;
}
#main {
background: yellow;
}
h1 {
margin: 0;
}
<style>
html,
body {
height: 100%;
margin: 0;
background: red;
}
#main {
height: 100%;
background: yellow;
/* overflow:auto; depends on behavior expected when too much content */
}
h1 {
margin: 0;
}
</style>
<body>
<div>
<h1>Header within a div of any height </h1>
</div>
<div id="main">
Adjust the height, should i scroll if too much content ? then add overflow:auto;
</div>
</body>
You can set .main to position: absolute;, then use bottom: 0; left: 0; right: 0; to stretch it to all sides.
html,body {
height:100%;
margin:0;
background:red;
}
#main {
position: absolute;
bottom: 0;
top: 30px;
right: 0;
left: 0;
background:yellow;
}
h1 {
margin:0;
}
https://jsfiddle.net/841f9z5b/
Using viewport units we can get the desired div cover
html,body {
height: 100vh;
margin:0;
background:red;
}
#main {
height: 80vh;
background:yellow;
}
h1 {
margin:0;
height:20vh;
}
http://codepen.io/nagasai/pen/zBqQLq
You can use CSS calc to set your div height dynamically.
This will work with IE9 and above (so pretty much covers all modern browsers)
<style >
html,body {
height:100%;
margin:0;
background:red;
}
#main {
height: calc(100% - 37px); /* Height of header subtracted*/
background:yellow;
}
h1 {
margin:0;
}
</style>
<body >
<div>
<h1>Header</h1>
</div>
<div id="main">
Adjust the height
</div>
</body>
I am trying to make the blue div expand to the height of the page but nothing seems to work:
JSFiddle
css:
/* Reset */
html,body {
width:100%;
height:100%;
margin:0px;
}
/* General */
.clear {
clear:both;
}
/* Page Layout */
#page {
margin-left:250px;
min-height:100%;
background-color:green;
}
#main {
float:right;
width:100%;
background-color:blue;
height:100%;
}
#sidebar {
float:left;
width:250px;
margin-left:-250px;
background-color:#222629;
min-height:100%;
}
and html:
<div id="page">
<div id="main">
main
</div>
<div id="sidebar">
<ul>
<li>something</li>
...
<li>something</li>
</ul>
</div>
<div class="clear"></div>
</div>
The same needs to hold true for the sidebar if the page is much longer than the sidebar content.
Add this to the bottom of the fiddle, I think its what you want.
#main {
height: 100vh;
}
https://jsfiddle.net/ac1p22r4/
here it is with some extra touchup
https://jsfiddle.net/ssj3xtr7/
Because div doesn't contain anything so it will not expanding.
You can give position:fixed to make blue div to expand to height of page.
#main {
background-color: blue;
float: right;
height: 100%;
position: fixed;
width: 100%;
}
Check: https://jsfiddle.net/qyt83gow/1/
Another option is give min-height to that div.
Just change the height attribute's value of #main and #sidebar like this:
#main, #sidebar {
height: 100vh;
}
This stretches the height of the div to the page's height.
Hope this solves your problem.
/* Reset */
html, body {
width: 100%;
height: 100%;
margin: 0;
}
/* General */
.clear {
clear: both;
}
/* Page Layout */
#page {
display: table;
width: 100%;
}
#main {
width: 50%;
background-color: blue;
display: table-cell;
}
#sidebar {
background-color: #00FF00;
display: table-cell;
background-color: #222629;
}
updated link here
Your CSS is correct, but one mistake in your css is, there are lot more content in sidebar which is increasing height of that sidebar. Just put overflow:auto or overflow-y:auto; to add a scrollbar to sidebar, which will give you expected result.
Here is complete CSS
/* Reset */
html,body {
width:100%;
height:100%;
margin:0px;
}
/* General */
.clear {
clear:both;
}
/* Page Layout */
#page {
margin-left:250px;
height:100%;
background-color:green;
}
#main {
float:right;
width:100%;
background-color:blue;
height:100%;
overflow:scroll;
}
#sidebar {
float:left;
width:250px;
margin-left:-250px;
background-color:#222629;
max-height:100%;
overflow:scroll;
}
Here is Fiddle.enter link description here
My suggestion is, don't use vm as it doesn't support some browsers and partially support to some. Here is support map
use class expand-panel on both div sidebar and menu.
html, body {
width: 100%;
height: 100%;
margin: 0;
}
.clear {
clear: both;
}
#page {
display: table;
width: 100%;
}
.expand-panel {
display: table-cell;
width: 50%;
}
#main {
background-color: blue;
}
#sidebar {
background-color: #00FF00;
}
function resize () {
var x = $('#page').height();
$('#main').css('height',x+'px');
}
$(document).ready (function(){
resize();
})
$(window).resize(function(){
resize();
})
Fiddle
give height in px or give this class (margin:5 or 10px;)
Working on a fullpage ("locked") design.
Here's what I'm working with:
http://jsfiddle.net/5yex5nfu/
<div id="wrapper">
<div id="navigation">
Nav
</div>
<div id="main">
Main
</div>
<div id="footer">
Footer
</div>
</div>
body {
height: 100%;
width: 100%;
margin: 0px;
}
#wrapper {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:50px;
margin-bottom:50px;
margin-right:50px;
margin-left:50px;
background-color: lightblue;
}
#navigation, #footer {
width: 100%;
height: 70px;
background: pink;
}
#main {
height: auto;
background: lightgreen;
}
I want the main div to fill out the rest of the "locked" div, with a %-value; whilst the footer and navigation hade assigned px-values.
Have seen a few solutions for my problem, but none of them seems to work. Have tried to set a %-value for every div, and it works, but as expected: The whole thing scales and messes up the layout.
For a pure css solution you can use calc to calculate the height of main
Example http://jsfiddle.net/5yex5nfu/2/
Just change #main height from auto to this
#main {
height: calc(100% - 140px);
}
Read more about calc and a-couple-of-use-cases-for-calc
You can use just css, with display:table propriety!
http://jsfiddle.net/Monteduro/5yex5nfu/5/
#wrapper {
position: absolute;
top: 0;
left: 0;
background-color: lightblue;
display: table;
height: 100%;
width: 100%;
box-sizing: border-box;
padding:50px;
}
#navigation, #footer {
width: 100%;
height: 70px;
background: pink;
display:table-row;
}
#main {
height: auto;
background: lightgreen;
display:table-row;
}