What causes vertical scrollbar to appear here? http://codepen.io/anon/pen/QGByOQ?editors=1100
As I suggest, .container is 100% height of body, body inherits html, html is 100% of the viewport, hence every .chart should fit perfectly as it's height is half of the .container's. Nevertheless a y-scrollbar appears. What's the behavior behind this?
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="container">
<div class="chart1"></div>
<div class="chart1"></div>
<div class="chart1"></div>
<div class="chart1"></div>
</div>
</body>
</html>
css:
.container {
width: 100%;
height: 100%;
border: 5px dashed black;
box-sizing: border-box;
font-size: 0;
overflow: auto;
}
html, body {
height: 100%;
}
body {
margin: 0;
}
.chart1 {
display: inline-block;
width: 50%;
height: 50%;
border: 1px solid red;
box-sizing: border-box;
}
This is due to the red border of the container. Use CSS calc() function, like:
.chart1 {
height: calc(100% - 1px); /* 1px for the extra border */
}
Have a look at the snippet below:
.container {
width: 100%;
height: 100%;
border: 5px dashed black;
box-sizing: border-box;
font-size: 0;
overflow: auto;
}
html, body {
height: 100%;
}
body {
margin: 0;
}
.chart1 {
display: inline-block;
width: 50%;
height: calc(50% - 1px);
border: 1px solid red;
box-sizing: border-box;
}
<div class="container">
<div class="chart1"></div>
<div class="chart1"></div>
<div class="chart1"></div>
<div class="chart1"></div>
</div>
Hope this helps!
Related
how do I remove the indent in 1 px left of the blue div? I tried to reset border, no effect
body
{margin: 0; padding: 0; width: 100%; height: 100%; background: #222222;}
.container
{background: red; width: 1600px; height: 100px; margin: 0 auto;}
.header
{background: blue; width: 100%; height: 64px; box-sizing: border-box;}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<div class="container">
<div class="header"></div>
</div>
</body>
</html>
Judging your example, there seems to be some margin on the body element. You can remove it like this:
.container {
background: red;
width: 1600px;
height: 100px;
margin: 0 auto;
}
.header {
background: blue;
width: 100%;
height: 64px;
box-sizing: border-box;
}
body {
margin: 0;
}
<div class="container">
<div class="header"></div>
</div>
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Fill remaining vertical space with CSS using display:flex
(6 answers)
Closed 3 years ago.
I have a <div> that takes up 60% of the window space, and it contains two things:
a narrow header line
an image that I want to take up the remainder of the div.
How can I do this with pure CSS (no Javascript)? I've been trying a bunch of things, no luck.
This is the closest I can get; the image sneaks outside of the green border of the div.container
html, body {
height: 100%;
overflow: hidden;
margin: 0px;
}
div.container {
height: 60%;
border: 2px solid green;
box-sizing: border-box;
}
div.rest {
height: 40%;
border: 2px solid red;
box-sizing: border-box;
}
div.img-container {
height: 100%; /* this is wrong, but what do I do? */
}
div.img-container img {
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
opacity: 0.5;
}
<html>
<body>
<div class="container">
<div class="header">hieronymus bosch last judgement</div>
<div class="img-container"><img src="https://i.imgur.com/TT6drhn.jpg"></div>
</div>
<div class="rest">
<h1>blah blah blah</h1>
</div>
</body>
</html>
Here's my attempt at using flex but that fails.
html, body {
height: 100%;
overflow: hidden;
margin: 0px;
}
div.container {
height: 60%;
border: 2px solid green;
box-sizing: border-box;
display: flex;
flex-direction: column
}
div.rest {
height: 40%;
border: 2px solid red;
box-sizing: border-box;
}
div.img-container {
flex: 1;
}
div.header {
flex: 0;
}
div.img-container img {
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
opacity: 0.5;
}
<html>
<body>
<div class="container">
<div class="header">hieronymus bosch last judgement</div>
<div class="img-container"><img src="https://i.imgur.com/TT6drhn.jpg"></div>
</div>
<div class="rest">
<h1>blah blah blah</h1>
</div>
</body>
</html>
#Christian's approach works if you know the height of the header element, however alternatively you could use flex.
This allows the element to grow to fill the remaining space dynamically, so your header can be any height.
html,
body {
height: 100%;
overflow: hidden;
margin: 0px;
}
div.container {
height: 60%;
border: 2px solid green;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
div.rest {
height: 40%;
border: 2px solid red;
box-sizing: border-box;
}
div.img-container {
flex: 1;
position: relative;
}
div.img-container img {
opacity: 0.5;
height: 100%;
position: absolute;
}
<html>
<body>
<div class="container">
<div class="header">hieronymus bosch last judgement</div>
<div class="img-container"><img src="https://i.imgur.com/TT6drhn.jpg"></div>
</div>
<div class="rest">
<h1>blah blah blah</h1>
</div>
</body>
</html>
If you look at div.img-container in Chrome Inspector, you can see what the issue is - the img element is doing its job and filling its container, but the container itself is overflowing.
This is happening because it is set to height: 100% - what this says is "make my height 100% of my parent's height", but this does not mean "fill the remaining space." The browser just reads the computed height of the element's parent, and then multiplies it by your % value - basically, it's all in absolute terms. You can see that the blue box is 100% as tall as the box outlined in green, but because it sits below a line of text, it overflows by the height of that text.
flex could be used to solve this problem, but you can patch this pretty quickly by using calc to subtract out the height of that text. In your example, it's 19px, and I would recommend manually setting the height of that text element container just to be sure nothing will break in edge cases. Then, the .img-container gets height: calc(100% - 19px) and it works as expected.
html, body {
height: 100%;
overflow: hidden;
margin: 0px;
}
div.container {
height: 60%;
border: 2px solid green;
box-sizing: border-box;
}
div.rest {
height: 40%;
border: 2px solid red;
box-sizing: border-box;
}
div.img-container {
height: 100%; /* this is wrong, but what do I do? */
}
div.img-container img {
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
opacity: 0.5;
}
/*
ADDED CODE BELOW
*/
/* optional, just to be safe */
.header {
height: 19px;
}
/* overrides .img-container from above */
.img-container {
height: calc(100% - 19px) !important;
}
<html>
<body>
<div class="container">
<div class="header">hieronymus bosch last judgement</div>
<div class="img-container"><img src="https://i.imgur.com/TT6drhn.jpg"></div>
</div>
<div class="rest">
<h1>blah blah blah</h1>
</div>
</body>
</html>
With Flex, you may use the flex property and overflow (or min-height). Example:
html, body {
height: 100vh;
margin: 0px;
display:flex;
flex-direction:column;
}
div.container {
flex:6;/* instead height:xx% */
border: 2px solid green;
box-sizing: border-box;
display: flex;
flex-direction: column;
overflow:hidden; /* or min-height:0 if scroll is needed */
}
div.rest {
flex:4;/* instead height:xx% */
border: 2px solid red;
box-sizing: border-box;
}
div.img-container {
flex: 1;
min-height:0; /* or overflow:hidden; */
}
div.header {
min-height:1.6em; /* if you need something alike ?? */
}
div.img-container img {
max-height: 100%;
opacity:0.5;
}
<html>
<body>
<div class="container">
<div class="header">hieronymus bosch last judgement</div>
<div class="img-container"><img src="https://i.imgur.com/TT6drhn.jpg"></div>
</div>
<div class="rest">
<h1>blah blah blah</h1>
</div>
</body>
</html>
I have a div that has a fixed height of 20cm. Now, the inner page needs to have padding and position absolute needs to respect that padding.
How can I make the red box fill always what's left? The position absolute item needs to be always at the bottom no matter what.
It needs to have one class, and not 10classes with 10different heights like 58%, 45% etc...
If you check the codepen: https://codepen.io/Aurelian/pen/MqxvgW
Here's the HTML:
<div class="page">
<div class="image"></div>
<div class="page-inner-default">
<p>hello</p>
<span class="pos-bot">Hi</span>
</div>
</div>
<div class="page">
<div class="image"></div>
<h1>Heading</h1>
<div class="page-inner-default">
<p>hello</p>
<span class="pos-bot">Hi</span>
</div>
</div>
Here's the CSS:
*, *:before, *:after {
box-sizing: border-box;
}
body {
background: grey;
box-sizing: border-box;
}
.image {
height: 250px;
border: 1px solid green;
background: green;;
}
.pos-bot {
position: absolute;
bottom: 0;
}
.page {
height: 20cm;
background-color: white;
width: 16cm;
margin: 50px auto;
display: inline-block;
vertical-align: top;
position: relative;
}
.page-inner-default {
position: relative;
padding: 50px;
height: 100%;
border: 1px solid red;
}
.image {
}
Give the .page{overflow:hidden} and remove the position relative from the .page-inner-default so the .pos-bot will be positioned to the closest relative and in this case it is the .page div
*, *:before, *:after {
box-sizing: border-box;
}
body {
background: grey;
box-sizing: border-box;
}
.image {
height: 250px;
border: 1px solid green;
background: green;;
}
.pos-bot {
position: absolute;
bottom: 0;
}
.page {
overflow: hidden;
height: 20cm;
background-color: white;
width: 16cm;
margin: 50px auto;
display: inline-block;
vertical-align: top;
position: relative;
}
.page-inner-default {
padding: 50px;
min-height: 100%;
border: 1px solid red;
}
<div class="page">
<div class="image"></div>
<div class="page-inner-default">
<p>hello</p>
<span class="pos-bot">Hi</span>
</div>
</div>
<div class="page">
<div class="image"></div>
<h1>Heading</h1>
<div class="page-inner-default">
<p>hello</p>
<span class="pos-bot">Hi</span>
</div>
</div>
I am trying to create a site with a frame that fills all the vertical space, e.g. becomes smaller and overflowing content becomes scrollable.
html and body height are set to 100vh and all of the boxes parents are set to 100%. I have not found another method and this results in every single parent being 100vh and ultimately the site overflowing.
What am I doing wrong?
I feel like a am just missing the right "position: " attributes...
<!DOCTYPE html>
<html>
<head>
<title>Pastebook</title>
<style type="text/css">
html,
body {
height: 100vh;
}
/*central panel*/
.central {
position: absolute;
width: 100%;
margin: 0 auto;
height: 100%;
border: 3px solid blue;
}
/*central middle panel*/
.middle {
margin: 0 auto;
max-width: 970px;
height: 100%;
border: 3px solid yellow;
}
/*content panel*/
.contentPanel {
margin: 0 auto;
padding-top: 0px;
height: 100%;
border: 3px solid lightgreen;
}
/*Clipboard Box*/
.clipboard {
border-radius: 5px;
border: 5px solid gray;
font-size: 100%;
overflow: auto;
padding: 5px;
height: 100%
}
/*Example content*/
.content {
height: 100px;
background: lightgray;
margin: 5px;
}
</style>
</head>
<body>
<div class="central">
<div class="content">
central
</div>
<div class="middle">
<div class="content">
middle
</div>
<div class="contentPanel">
<div class="content">
content
</div>
<div class="clipboard">
<div style="height:400px; background: lightgray; margin:5px;">
clipboard
</div>
<div style="height:400px; background: lightgray; margin:5px;">
clipboard
</div>
<div style="height:400px; background: lightgray; margin:5px;">
clipboard
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I tried some changing and this works
html,
body {
height: 100vh;
padding:0;
margin:0;
overflow:hidden;
}
/*central panel*/
.central {
position: absolute;
width: 100%;
margin: 0 auto;
height: 100vh;
border: 3px solid blue;
box-sizing: border-box;
overflow:scroll;
}
/*central middle panel*/
.middle {
margin: 0 auto;
max-width: 970px;
border: 3px solid yellow;
box-sizing: border-box;
}
/*content panel*/
.contentPanel {
margin: 0 auto;
padding-top: 0px;
border: 3px solid lightgreen;
box-sizing: border-box;
}
/*Clipboard Box*/
.clipboard {
border-radius: 5px;
border: 3px solid gray;
box-sizing: border-box;
font-size: 100%;
overflow: scroll;
padding: 5px;
}
/*Example content*/
.content {
background: lightgray;
margin: 5px;
}
tell me if something doesn't work or if I did something wrong :)
edit: okay so I looked into it a bit further and you can
use flex boxes (which I do not like for no reason)
javascript(which is an even worse solution but also works)
css calc() function(I included this one at the bottom)
this will work better with a css addon that lets u use heights of
other elements inside the calc() function
html,
body {
height: 100vh;
padding: 0;
margin: 0;
overflow: hidden;
}
/*central panel*/
.central {
width: 100%;
margin: 0 auto;
height: 100vh;
border: 3px solid blue;
box-sizing: border-box;
overflow: hidden;
}
/*central middle panel*/
.middle {
margin: 0 auto;
max-width: 300px;
border: 3px solid yellow;
box-sizing: border-box;
height: calc(100vh - 55px);
overflow: hidden;
}
/*content panel*/
.contentPanel {
margin: 0 auto;
padding-top: 0px;
border: 3px solid lightgreen;
box-sizing: border-box;
height: calc(100vh - 110px);
overflow: hidden;
}
/*Clipboard Box*/
.clipboard {
border-radius: 5px;
border: 3px solid gray;
box-sizing: border-box;
overflow: scroll;
padding: 5px;
height: calc(100vh - 165px);
}
/*Example content*/
.content {
background: lightgray;
margin: 5px;
height: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>Pastebook</title>
</head>
<body>
<div class="central">
<div class="content">
central
</div>
<div class="middle">
<div class="content">
middle
</div>
<div class="contentPanel">
<div class="content">
content
</div>
<div class="clipboard">
<div style="height:400px; background: lightgray; margin:5px;">
clipboard
</div>
<div style="height:400px; background: lightgray; margin:5px;">
clipboard
</div>
<div style="height:400px; background: lightgray; margin:5px;">
clipboard
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Try
.central
{
overflow-y: auto;
}
I have a problem with 5 floating divs, here is a picture:
You will see.. the green div should be on the left side from the red div(instead of the empty place) and the violet div on the place from the green div.
The html order from the divs is: blue, red, orange, green and violet, I think this is the reason for this white, empty space, because the green and the violet div comes in the html after! the red div, is this right?
What can i do, to fix this problem, anyone have an idea? I set the margin-top of the violet to -300px but I think this not a clean solution and than would be the order(html structure) false.
Here is my full html:
<!DOCTYPE html>
<html>
<head>
<title>ResponsiveExample</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="layout.css">
<script src="js/libs/jquery/jquery.js"></script>
</head>
<body>
<div class="page-wrapper">
<header>
<div class="header">
</div>
<div class="below-header"></div>
</header>
<div class="main-content">
<div class="blue-box"></div>
<div class="red-box"></div>
<div class="orange-box"></div>
<div class="green-box"></div>
<div class="violet-box"></div>
</div>
<footer>
</footer>
</div>
</body>
</html>
And here is my CSS:
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body
{
margin: 0;
padding: 0;
}
.header{
position: fixed;
height: 50px;
width: 100%;
background-color: grey;
}
.below-header{
height: 50px;
width: 100%;
}
.blue-box{
height: 300px;
background-color: blue;
}
.red-box{
height: 600px;
background-color: red;
}
.orange-box{
height: 300px;
background-color: orange;
}
.green-box{
height: 300px;
background-color: greenyellow;
}
.violet-box{
height: 300px;
background-color: violet;
}
#media only screen and (min-width: 28.125em) {
.blue-box{
float: left;
width: 50%;
}
.red-box
{
float: left;
width: 100%;
}
.orange-box{
float: left;
width: 50%;
}
.green-box{
float: left;
width: 50%;
}
#media only screen and (min-width: 71.875em){
.blue-box{
width: 33%;
border: 5px solid black;
}
.red-box{
width: 33%;
border: 5px solid black;
}
.orange-box{
width: 33%;
border: 5px solid black;
clear: right;
}
.green-box{
width: 33%;
border: 5px solid black;
clear: right;
}
.violet-box{
width: 33%;
//margin-top: -300px;
border: 5px solid black;
float: left;
}
}
}
I would be very grateful for every help that I get!
Try this:
<div class="main-content">
<div id="left">
<div class="blue-box"></div>
<div class="green-box"></div>
</div>
<div id="center">
<div class="red-box"></div>
</div>
<div id="right">
<div class="orange-box"></div>
<div class="purple-box"></div>
</div>
</div>
Then apply CSS styles to your liking.