This question already has an answer here:
Margin collapsing with floated element, why there is an extra margin added?
(1 answer)
Closed 3 years ago.
I would like to create a conainer element, which is at least the height of the page. I set it like this: min-height: 100vh
The body has no margin.
For some reason, an empty space appears under the element. How is it possible to eliminate that?
I can observe this error in Chrome and Edge, but not in Firefox.
My code:
body {
margin: 0;
background: red;
}
.container {
margin: auto;
max-width: 200px;
background: gray;
min-height: 100vh;
box-sizing: border-box;
}
.item {
background: white;
margin-bottom: 1em;
height: 100px;
}
<div class="container">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
</div>
This is how it looks like:
You can get it to work by removing the margin of the last .item element.
body {
margin: 0;
background: red;
}
.container {
margin: auto;
max-width: 200px;
background: gray;
min-height: 100vh;
box-sizing: border-box;
}
.item {
background: white;
margin-bottom: 1em;
height: 100px;
}
.item:last-child {
margin:0;
}
<div class="container">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
</div>
The issue is caused by the .container margin to center with auto and the .item children having a bottom margin. For some reason the causing a lack of collapse which is, in turn, causing the margin to overflow (or append to) it's owner, even if margin-bottom: 0 is applied to .container.
To resolve this, we have come up with a different way, by not using margin: auto;, of centering the .container.
As well as, to force a collapse by setting a height relationship between culprit of the overflow and it's parent. We will accomplish this by setting height: 100%; to html, body.
I will propose three solutions which solve the display discrepancy.
Option 1
Edit: This solution does not seem to be consistent to me in Edge upon further testing. Sometimes I have to open DevTools and toggle min-height: 100vh; in .container to get it to render correctly.
html, body {
height: 100%;
}
.container {
/* Remove the margin */
/* margin: auto; */
position: relative;
left: 50%;
transform: translateX(-50%);
This fixes the issue in Edge and Chrome. To answer the question, this is the only edit required.
jsFiddle
html,
body {
height: 100%;
}
body {
margin: 0;
background: red;
}
.container {
position: relative;
left: 50%;
transform: translateX(-50%);
min-height: 100vh;
max-width: 200px;
background: grey;
}
.item {
position: relative;
margin-bottom: 1em;
height: 100px;
background: white;
}
<div class="container">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
</div>
Option 2
This method is a slight modification to how the .item margin is applied where we will apply to all .item's except the last one using :not(last-child).
jsFiddle
html, body {
height: 100%;
}
body {
margin: 0;
background: red;
}
.container {
margin: auto;
min-height: 100vh;
max-width: 200px;
background: grey;
}
.item {
position: relative;
height: 100px;
background: white;
}
.item:not(:last-child) {
margin-bottom: 1em;
}
<div class="container">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
</div>
Option 3
If you're familiar with Flexbox, you could solve it that way with the following edits to your CSS:
body {
margin: 0;
background: red;
display: flex;
flex-direction: column;
justify-content: center;
}
.container {
/* Without a min height set the width
/* will default to the content's width */
/* max-width: 200px; */
width: 200px;
margin: auto;
background: gray;
min-height: 100vh;
box-sizing: border-box;
}
.item {
position: relative;
margin-bottom: 1em;
height: 100px;
background: white;
}
<body>
<div class="container">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
</div>
</body>
Here, we set body as flexbox, set as column direction, and center the content (direct children).
Importantly, we have to set a minimum width so that if our content is less than 200px it won't get squished.
You can just set height: 100% on the container for it to be the height of the page at all times.
The below modified code should help you. Set margin: 0 in the html and body elements
html, body { /* or use * to apply this margin reset to all elements */
margin :0;
}
body{
background: red;
}
.container {
margin: auto;
max-width: 200px;
background: gray;
height:100vh;
box-sizing: border-box;
}
.item {
background: white;
margin-bottom: 1em;
height: 100px;
}
<div class="container">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
</div>
You might try to add some padding to your .item
Related
I'm having problem with my div with contenteditable=true which break my whole page.
When you type a lot of text, instead adding scrollbar it make div bigger so it move others parts of the page...
So what I would like my editable div fill remaining width and height of the page but add scrollbar when text being too big whitout moving others elments of the page. Thanks
JsFiddle
HTML
<body>
<h1>TEXT</h1>
<div class="all">
<div class="container">
<div class="lines"></div>
<div class="editor" contenteditable="true" spellcheck="false"></div>
</div>
<div class="manage">
<h1>TEXT</h1>
</div>
</div>
</body>
CSS
html, body {
margin: 0;
padding: 0;
display: flex;
height: 100%;
width: 100%
}
h1 {
margin: 20px;
}
.all {
display:flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.container {
display: flex;
width: 100%;
height: 400px;
overflow: auto;
}
.lines {
background-color: red;
border-radius: 20px 0 0 20px;
height: 100%;
width:40px;
}
.editor {
border-radius: 0 20px 20px 0;
background-color: orange;
width: 100%;
height: 100%;
}
All you need to do is to add a max-width property to your .editor class.
Here is a working code: https://codesandbox.io/s/html-code-editor-forked-g27d9o?file=/index.html
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'm having a problem with two wrappers that I am using. I want to make the #wrapper always extend to the bottom of the screen. This is now working by using min-height: 100%;. Within this div I'm using another wrapper, #page-wrapper, which should be extended to the bottom of the #wrapper div. To make this work, the #wrapper div has to be set to height: 100% instead of min-height. Is there a way to achieve both?
#wrapper {
width: 100%;
background-color: #2f4050;
min-height: 100%;
position: relative;
}
#page-wrapper {
padding: 0 15px;
min-height: 100%;
background-color: white;
height: 100%;
}
<div id="wrapper">
<div id="page-wrapper"></div>
</div>
Try using viewport units.
#page-wrapper {
min-height: 100vh;
}
Example 1:
body {
margin: 0;
}
#wrapper {
background: pink;
}
#page-wrapper {
min-height: 100vh;
background: gold;
}
<div id="wrapper">
<div id="page-wrapper">
</div>
</div>
Example 2:
body {
margin: 0;
}
#wrapper {
background: pink;
}
#page-wrapper {
min-height: 100vh;
background: gold;
}
<div id="wrapper">
<div id="page-wrapper">
<div style="height:200vh;"></div>
</div>
</div>
jsfiddle: https://jsfiddle.net/jefftg/1chmyppm/
The orange header columns and the white list rows scroll together horizontally, which is desired. However, I want the white list rows to scroll vertically with the orange header fixed at the top. They currently don't. I'm looking for this to work in modern browsers with HTML5/CSS3.
css
.container {
width: 800px;
height: 600px;
overflow-x: auto;
overflow-y: hidden;
}
.header-container {
display: flex;
}
.header-cell {
height: 40px;
min-width: 500px;
background-color: orange;
border: 1px solid red;
}
.data-container {
overflow-y: auto;
overflow-x: hidden;
display: inline-block;
}
.data-row {
overflow-x: hidden;
display: flex;
}
.data-row-cell {
height: 30px;
min-width: 500px;
background-color: white;
border: 1px solid black;
}
html
<div class="header-container">
<div class="header-cell">A</div>
<div class="header-cell">B</div>
<div class="header-cell">C</div>
<div class="header-cell">D</div>
</div>
<div class="data-container">
<div class="data-row">
<div class="data-row-cell">
A1
</div>
<div class="data-row-cell">
B1
</div>
<div class="data-row-cell">
C1
</div>
<div class="data-row-cell">
D1
</div>
</div>
......
</div>
This can be done with pure CSS and you don't need JavaScript.
I've modified your JSFiddle to work the way you are requesting: https://jsfiddle.net/48386nvn/3/
Essentially, .header-container needs to be positioned absolute relative to the .container element:
.container {
width: 800px;
height: 600px;
overflow-x: auto;
overflow-y: hidden;
/* added this: */
position: relative;
}
.header-container {
display: flex;
/* added these: */
position: absolute;
top: 0;
left: 0;
}
The above-mentioned CSS will stick the orange header where you want it and maintain the width you need it to be.
Next, you'll need to make the data scrollable, which is done by doing the following calculation:
height: heightOfParentContainer - heightOfHeaderRow;
The header cell height is 40px (42px when respecting the borders) It also needs a margin-top equal to the height of the header row:
.data-container {
overflow-y: auto;
overflow-x: hidden;
display: inline-block;
/* added these: */
margin-top: 40px;
height: 560px;
}
This should make sure that the header row is not overlapping the data container, and that the height of the data takes up the rest of the space of the overall container.
I was able to get the desired result by simply adding height: 558px to .data-container: jsfiddle.net/jefftg/1chmyppm/2
You don't need to add the overflow to every element, just the elements that need scrolling,
all I did is gave your .data-containera display:block and a certain height so that the overflow-y:auto can work, you can change the height with what you see fits in your page.
this here shows my solution, I hope it helps.
$(".header-container").scroll(function() {
var scrollPercentage = 100 * this.scrollLeft / (this.scrollWidth - this.clientWidth);
$(".data-container").scrollTop(scrollPercentage);
});
.container {
width: 800px;
height: 600px;
}
.header-container {
display: flex;
overflow-x: auto;
}
.header-cell {
height: 40px;
min-width: 500px;
background-color: orange;
border: 1px solid red;
}
.data-container {
overflow-y: auto;
overflow-x: hidden;
display: block;
height: 100px;
}
.data-row {
display: block;
}
.data-row-cell {
height: 50px;
min-width: 500px;
background-color: white;
display: block;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header-container">
<div class="header-cell">A</div>
<div class="header-cell">B</div>
<div class="header-cell">C</div>
<div class="header-cell">D</div>
</div>
<div class="data-container">
<div class="data-row">
<div class="data-row-cell">
A1
</div>
<div class="data-row-cell">
B1
</div>
<div class="data-row-cell">
C1
</div>
<div class="data-row-cell">
D1
</div>
</div>
......
</div>
Centering elements horizontally is easy using margin: 0 auto;
However, it doesn't work if there are two elements stacked in a column and one has a scrollbar and the other does not. In that case, the two horizontal centered elements aren't aligned anymore.
Question: Is there any way to align the two elements without using Javascript to adjust the margin of the first one?
JSFIDDLE DEMO
<head>
<style>
body {
margin: 0; height: 100vh;
}
.header {
height: 50px; background: red;
}
.content {
overflow-y: scroll; background: blue;
}
.inner {
background: rgba(255,255,255,.5); max-width: 300px;
margin: 0 auto; min-height: 50px;
}
.content > .inner {
min-height: 300px;
}
</style>
</head>
<body>
<div class="header">
<div class="inner"></div>
</div>
<div class="content">
<div class="inner"></div>
</div>
</body>
The main problem is obviously the centering. So why not circumvent it and use margin-left?
Try this CSS:
.inner { margin-left: calc(50vw - 150px); } /* half viewport width less half element width
(for precise centering) */
body {
margin: 0;
height: 100vh;
}
.header {
height: 50px;
background: red;
}
.content {
background: blue;
overflow-y: scroll;
}
.inner {
background: rgba(255,255,255,.5);
max-width: 300px;
/* margin: 0 auto; <-- remove */
margin-left: calc(50vw - 150px); /* new */
min-height: 50px;
}
.content > .inner {
min-height: 300px;
}
<div class="header">
<div class="inner"></div>
</div>
<div class="content">
<div class="inner"></div>
</div>
Revised Fiddle
Answer from Wes in chat:
This can be solved by adding a scrollbar to the first one, but hiding it from the user.
.header {
height: 50px;
background: red;
overflow-y: scroll;
width: 120%;
margin-left: -10%;
}
JSFIDDLE DEMO
If you're concerned a user could have a scrollbar wider than 10%, increase it width: 300% and margin-left: -100%. If somebody has a scrollbar as wide as the page, he / she can't use the page anyway.