I'm having an issue with my code and it seems easy but I can't get my head around it.
I'm trying to make the main div full vh so the content auto height should be 100vh - the height of the title box.
However, I keep getting the scroll bar for the length of the title box. Any fix?
Full HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<style>
.maindiv {
min-height: 500px;
height: 100vh;
background: red;
}
.maindiv-inner {
position: relative;
height: 100%;
width: 100%;
background: blue;
}
.maindiv-inner-content {
position: relative;
height: 100%;
width: 100%;
background: yellow;
}
.titlediv {
height: 200px;
}
</style>
<div class="maindiv">
<div class="maindiv-inner">
<div class="titlediv">
Title 1
</div>
<div class="maindiv-inner-content">
</div>
</div>
</div>
</body>
</html>
You can easily solve this issue by changing some of the CSS classes like this.
body{
padding:0;
margin:0;
}
.maindiv
{
/*min-height:500px;*/
height: 100vh;
background:red;
position: relative;
}
.maindiv-inner
{
position: relative;
background:blue;
}
.maindiv-inner-content
{
position:fixed;
background:yellow;
height:100%;
width:100%;
}
.titlediv
{
height:200px;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div class="maindiv">
<div class="maindiv-inner">
<div class="titlediv">
Title 1
</div>
<div class="maindiv-inner-content">
<div>Something in Content</div>
</div>
</div>
</div>
</body>
</html>
does the following provide what you want?
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<style>
body {
margin: 0;
}
.maindiv
{
min-height:500px;
height:100vh;
background:red;
width:100%;
background:blue;
}
.maindiv-inner-content
{
height: calc( 100% - 200px );
width:100%;
background:yellow;
}
.titlediv
{
height:200px;
}
</style>
<div class="maindiv">
<div class="titlediv">
Title 1
</div>
<div class="maindiv-inner-content">
</div>
</div>
</body>
</html>
Basically you need to remove the margin from the body, otherwise if you set the div to 100vh you will get a scrollbar.
Then you can use calc to make the height of the div you want too be 100% - height-of-titlediv.
I removed the maindiv-inner as I did not understand what it was there for, so I just thought it was unnecessary.
Also the relative positioning seemed unnecessary so I removed that as well.
simple way to achieve the bahavior is the use of either flexbox or CSS-Grid. With CSS-Grid you declared the grid as 2 rows by display: grid; grid-template-rows: min-content auto;. The title row will have the hieght min-content means that it will only take up as much height as needed or declared. The 2nd row with the hight of auto will take up all remaining height by default.
body {
margin: 0;
}
.maindiv {
background: red;
}
.maindiv-inner {
box-sizing: border-box;
height: 100vh;
display: grid;
grid-template-rows: min-content auto;
background: blue;
}
.maindiv-inner-content {
background: yellow;
}
.titlediv {
height: 100px; /* changed for demo */
}
<div class="maindiv">
<div class="maindiv-inner">
<div class="titlediv">
Title 1
</div>
<div class="maindiv-inner-content">
</div>
</div>
</div>
Related
I've seen there are a couple questions similar to this one but none of them seem to solve my problem.
I want a very simple design:
Two or more divs stacked on top of each other, each of them docked to the right. I'm practicing for a test on which using the float property is not allowed.
body{
width:900px;
height:850px;
margin-left:auto;
margin-right:auto;
}
#header{
width:900px;
height: 225px;
position: absolute;
right:0px;
border:1px solid black;
}
#cen{
width: 900px;
height: 240px;
position: absolute;
right:0px;
border:1px solid orange;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="header">
</div>
<div id="cen">
</div>
</body>
</html>
Now, when I only had one div (header), this worked, it was docked right. But when I add the 'cen' div it is also docked right but, instead of going underneath the 'header' div, it just goes over it.
Any ideas how to fix this?
Thanks.
Absolute elements won't behave in a decent manner they won't bother any blocks in their ways.
Since the element header has a height you can add the cen element under it by giving top:"whatever the height the header is"
Here the height of the header is 225px
Stack the cen in a position of top: 255px so it will be below the header.
Try this...
*{box-sizing:border-box;}
body{
width:900px;
height:850px;
margin-left:auto;
margin-right:auto;
}
#header{
width:900px;
height: 225px;
position: absolute;
right:0px;
border:1px solid black;
top:0;
}
#cen{
width: 900px;
height: 240px;
position: absolute;
right:0px;
top:225px;
border:1px solid orange;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="header">
</div>
<div id="cen">
</div>
</body>
</html>
Statically positioned block elements (divs) will stack like you describe by default. So there is no need for absolute positioning.
Also, there is no need to set a width because:
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
body {
width: 900px;
margin-left: auto;
margin-right: 0;
}
#header {
height: 225px;
border: 1px solid black;
}
#cen {
height: 240px;
border: 1px solid orange;
}
<div id="header">
</div>
<div id="cen">
</div>
You can use flexbox for something like this:
.container {
width:100vw;
display:flex;
justify-content: flex-end;
}
.column {
display: flex;
flex-direction:column;
flex-basis:33%;
}
.row {
display: flex;
background-color: red;
width: 100%;
flex-grow: 1;
height: 100px; /* can be whatever you like */
margin: .25rem;
}
<div class="container">
<div class="column">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
</div>
CSS Grid would probable work even better, but I haven't worked with it enough.
I'm trying to split the page in two divs with 100% height and a background color.
The problem starts when you scroll the page: the background-color on the second div does not fill 100% height (the second div's content is less than the other one).
HTML CODE
<div class="wrap">
<div class="floatleft">
<p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p>
<p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p>
<p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p>
<p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p>
</div>
<div class="floatright"><p>s</p><p>s</p></div>
<div style="clear: both;"></div>
</div>
CSS
body, html { height: 100%; margin: 0;}
.wrap{ min-height:100%; height: 100%;}
.floatleft{background-color:red; min-height:100%; float:left; width: 50%; }
.floatright{background-color:yellow; float:right; min-height:100%; width: 50%; }
I found similar questions on stackoverflow but no one can help me on this particular case.
Here the fiddle: https://jsfiddle.net/jprohj09/
you can use display:flex on the .wrap so the two columns have the same height . see snippet below :
or jsfiddle
body, html {
height: 100%;
margin: 0;
}
.wrap{ display:flex;width:100%}
.floatleft{background-color:red; width:50%}
.floatright{background-color:yellow;width:50% }
<div class="wrap">
<div class="floatleft">
<p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p>
</div>
<div class="floatright"><p>s</p><p>s</p></div>
<div style="clear: both;">
</div>
Try using flexbox model
body, html {
height: 100%;
margin: 0;
}
.wrap {
display: flex;
min-height:100%;
}
.floatleft,
.floatright {
flex: 0 0 50%;
max-width: 50%;
}
.floatleft {background-color:red;}
.floatright{background-color:yellow;}
<div class="wrap">
<div class="floatleft">
<p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p>
</div>
<div class="floatright"><p>s</p><p>s</p></div>
<!-- you can skip this one <div style="clear: both;"> -->
</div>
This might solve your issue jsfiddle. Use display:table for wrap.
CSS:
body, html {
height: 100%;
margin: 0;
}
.wrap{ min-height:100%; height: 100%;display: table;width: 100%;}
.floatleft{background-color:red; min-height:100%; float:left; width: 50%; }
.floatright{background-color:yellow; float:right; min-height:100%; width: 50%; }
.wrap > div{ display: table-cell;float:none;}
I want a frame-like behavior, where I have a header (non-scrolling), footer stays at the bottom (non-scrolling), and in the middle to have two vertical divs. If content in these divs is too long for a window, they should show their own scrollbars - that is- no scrollbars in the body itself. I can't figure out how to make the div's width be: current-window-size - (footer + header). Is there a way to do it with CSS alone? (browser support needed IE9+)
HTML
<body>
<header>
<p>Header here</p>
</header>
<div> Something else here</div>
<main>
<div id="pane-1" style="background-color:#eee;">
Have your own scrollbar
</div>
<div id="pane-2" style="background-color:#ccc;">
Have your own scrollbar too
</div>
</main>
<footer style="background-color: #FFC;"> Footer here - should not scroll</footer>
</body>
CSS
html,
body {
overflow: hidden;
margin:0;
}
#pane-1,
#pane-2 {
display: inline-block;
vertical-align: top;
overflow: auto;
width: 49%;
}
footer {
height: 70px;
width:100%;
position: absolute;
bottom: 0;
}
Here is my code
http://codepen.io/anon/pen/tyvAe
Why not use the magic of semantic HTML and absolute positioning (note, background colors are used below to clearly show the various sections)
HTML
<header></header>
<section></section>
<section></section>
<footer></footer>
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
header, footer, section {
position:absolute;
width:100%;
}
header, footer {
height:50px;
background:red;
}
footer {
bottom:0;
}
section {
width:50%;
overflow:auto;
background:blue;
top:50px;
bottom:50px;
}
section:last-of-type {
background:yellow;
left:50%;
}
I don't know a realy good way to do this without Javascript, but here's mine with as little Javascript as possible (you'll need JQuery for this one):
http://jsfiddle.net/g13ogq2u/2/
Basically it's for the CSS:
html {
height:100%;
width:100%;
}
body {
width:100%;
height:100%;
margin: 0px;
padding: 0px;
background-color: #ffffff;
}
.header {
width:100%;
height: 50px;
min-height:50px;
padding:0px;
background-color:#CCAA00;
}
.page {
min-height: 100%;
height: auto !important;
/*Cause footer to stick to bottom in IE 6*/
height: 100%;
margin: 0 auto -70px;
/*Allow for footer height*/
vertical-align:bottom;
}
.content {
height:100%;
width:100%;
margin:0;
position:relative;
overflow:hidden;
}
.subContent {
height:100%;
width:50%;
min-height:100%;
margin:0;
float:left;
overflow:auto;
}
#subContentA {
background-color:#EEEEEE;
}
#subContentB {
background-color:#CCCCCC;
}
.pushFooter {
height: 70px;
/*Push must be same height as Footer (including its paddings) */
min-height:70px;
}
.footer {
height: 70px;
/*Push must be same height as Footer */
min-height:70px;
width:100%;
padding:0px;
margin:0px;
background-color:#FFFFCC;
position:relative;
overflow:hidden;
}
The little JQuery code is:
$.fn.doFitSize = function () {
var dHeight = $(window).height();
var hHeight = $(this).prevAll().outerHeight();
var fHeight = $(this).nextAll().outerHeight();
var cHeight = dHeight - hHeight - fHeight;
$(this).height(cHeight);
}
$(document).ready(function () {
$('.content').doFitSize();
});
$(window).resize(function () {
$('.content').doFitSize();
});
And the HTML would be:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
/* add mentioned style here */
</style>
<script src="jquery-1.9.1.js" type="text/javascript" ></script>
<script type="text/javascript">
/* add mentioned script here */
</script>
</head>
<body>
<div class="page">
<div class="header">
<span>this is the header</span>
</div>
<div class="content">
<div id="subContentA" class="subContent">
<span>This is the left content.</span>
</div>
<div id="subContentB" class="subContent">
<span>This is the right content</span>
</div>
</div>
<div class="pushFooter"></div>
</div>
<div class="footer">
<span>And this is the footer</span>
</div>
</body>
</html>
Hope it helps ;)
You can do this with css...
#pane-1, #pane-2 {
width: 200px;
height: 200px;
overflow: scroll;
}
Depending on what you need, you may also like to play with css property: max-height in place of height.
I need 3 column layout, first and 3rd column sizes are variable because there will be image or some variable length text(or another image) but i need middle to fill the rest space with background image, something like this if it would work like i imagine :
HTML:
<div class="left-vp">
<img src="~/Content/images/vp1.png" />
</div>
<div class="mid-vp">
</div>
<div class="right-vp">
<p>
//some text here or another img
</p>
</div>
CSS
.left-vp {
float: left;
}
.mid-vp {
height: 2px;
background: #FFFFFF url("images/dot.png") repeat-x;
width: 100%;
}
.right-vp {
float: right;
}
Is something like this possible with CSS?
If you have control of the markup, and don't mind making changes, you can use table block styles to accomplish this. It's the only way I know of which will handle all scenarios and resizing.
HTML
<div class="container">
<div>
<div class="col col1">
<div class="nowrap">Column 1</div>
</div>
<div class="col col2 fill center">
<div class="nowrap">Column 2</div>
</div>
<div class="col col3">
<div class="nowrap">Column 3</div>
</div>
</div>
</div>
CSS
.container { width: 100%; }
.container { display: table; }
.container > div { display: table-row; }
.container > div > div { display: table-cell; }
.container > div > div { padding: .5em; }
.container .nowrap { white-space: nowrap; }
.container .fill { width: 100%; }
.container .center { text-align: center; }
.col1 { background: red; }
.col2 { background: blue; }
.col3 { background: green; }
In action: http://jsfiddle.net/Vxc3n/1/
A few things to keep in mind:
If your first and 3rd columns contain text, you will need to wrap them in a DIV which has the white-space: no-wrap CSS style
If you have more than 1 fill column, ensure the width total = 100% (eg, 2 columns, use 50%)
You won't be able to shrink the columns beyond the minimum required width
HTML
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
CSS
#container{width:100%;}
#left{float:left;width:100px; height: 100px; background-color: gray;}
#right{float:right;width:100px; height: 100px; background-color: green;}
#center{margin:0 auto;width:100%; height:100px; background-color: blue;}
in action -> http://jsfiddle.net/5xfR9/39/
I'm not sure what your actual requirements are for that central column but if it's just to contain a background as in the question could you not move the background styles to the container itself?
As an expansion on Eriks' jsfiddle: http://jsfiddle.net/5xfR9/46/
HTML
<div id="container" class="clearfix">
<div id="left">some text</div>
<div id="right">some text</div>
</div>
CSS
#container{ width:100%; background-color: blue; }
#left{ float:left; height: 100px; background-color: red; }
#right{ float:right; height: 100px; background-color: green; }
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
I've added a clearfix class to make sure the container actually contains the columns so that the background can show through (this is the clearfix class from a version of HTML5 Boilerplate).
You just need to play around with min-width and max-width properties until you get what you want. And it seems to work easiest when you give the columns a max-width as a percentage of the body or a wrap.
Here is a working example i put together:
http://jsfiddle.net/76Ep3/1/
HTML
<div id="wrap">
<div id="left">LEFT content...</div>
<div id="center">CENTER content...</div>
<div id="right">Right content</div>
</div>
CSS
*{margin:0;padding:0;}
body, html{
height:100%;
}
#wrap {
min-width:390px;
height:100%;
}
#left{
float:left;
min-width:100px;
max-width:37%;
margin:0 auto;
background-color:blue;
height:100%;
}
#center {
float:left;
min-width:100px;
max-width:20%;
background-color:red;
height:100%;
}
#right {
float:left;
min-width:100px;
max-width:37%;
background-color:yellow;
height:100%;
}
I am trying to make an html page with 2 divs : "top" and "main"
The top <div> must take the place of its contained elements, the main <div> must take all the remaining place.
Here is what I tried:
CSS CODE :
html,body{
height:100%;
}
#top{
background-color : red;
padding:10px;
border:1px solid;
}
#main{
background-color : blue;
height:100%;
padding:10px;
border:1px solid;
}
#content1{
background-color:yellow;
}
#content2{
background-color:yellow;
height :100%;
}
HTML CODE:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="top">
<div id="content1">content1</div>
</div>
<div id="main">
<div id="content2">content2</div>
</div>
</body>
</html>
Here is the jsFiddle
As you can see, the "100%" I set on "content2" causes this div to take 100% of the page height instead of just the remaining space. Is there a magic css property to fix this?
EDIT:
Thank you for all your solutions.
I finally chose the solution proposed by Riccardo Pasianotto based on CSS properties display:table and display:table-row.
Here is my final HTML CODE:
<!DOCTYPE html>
<body>
<div id="content1" class="row">
<div class="subcontent">
<div class="subContentContainer">
content1
</div>
</div>
</div>
<div id="content2" class="row">
<div class="subcontent">
<div class="subContentContainer">
content2
</div>
</div>
</div>
</body>
Here is the corresponding CSS CODE:
html,body{
padding:0;
margin:0;
height:100%;
width:100%;
}
body{
display:table;
}
.row{
display:table-row;
width:100%;
}
#top{
height:100px;
}
#content1{
background:#aa5555;
padding:10px;
}
#content2{
background:#5555AA;
height:100%;
}
.subcontent{
padding : 10px;
height:100%;
}
.subContentContainer{
background-color:yellow;
height:100%;
}
And here is the corresponding Jsfiddle.
DEMOJF
For doing this you have to use display:table so edit in that way
html,
body {
height: 100%;
width: 100%;
}
body {
display: table;
}
.row {
display: table-row;
width: 100%;
background: red;
}
#top {
height: 100px;
}
#content1 {
background: yellow;
height: 100%;
}
#content2 {
overflow: scroll;
height: 100%;
border: 1px solid black;
}
<body>
<div id="top" class="row">
<div id="content1">content1</div>
</div>
<div id="main" class="row">
<div id="content2">content2</div>
</div>
</body>
What I often do is making a container without padding to min-height: 100% and let my content have its proper height (auto) :
This will make something like this :
#container {
background-color : #5555AA;
min-height: 100%;
}
#content2 {
background-color:yellow;
margin: 10px;
}
http://jsfiddle.net/5cEdq/25/
I don't know if this is exactly what you want, but you can't make a div just "fill the remaning space" without making it absolute. What you don't really want either.
try this:
http://jsfiddle.net/5cEdq/16/
CSS :
html,body{
height:100%;
Padding:0;
margin:0;
border:0;}
Since both Divs are using 100% height set on the html and body tag you only need to set it there then zero your margin and padding. Generally if you have to set a div and its parent div both to 100% height you're overdoing it.
Is there a magic css property to fix this?
Yes there is. It's called box-sizing
Read this article for more info about the box-sizing property.
FIDDLE
So if your header was say 64px high, then you'd do something like this:
.container {
height: 100%;
background: pink;
margin-top: -64px;
padding-top: 64px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<header>header</header>
<div class="container">
<div class="content">
content here
</div>
</div>