This question already has answers here:
Why does height 100% work when DOCTYPE is removed?
(5 answers)
Closed 5 years ago.
The following HTML is simple and does what I want. The green body stretches downward to fill the window.
<body style="margin:0">
<div style="height:100%;display:flex;flex-direction:column">
<div style="background:#d0d0ff">
This is a header
</div>
<div style="background:#d0ffd0;flex-grow:1">
This is the body.
</div>
</div>
</body>
But if I replace that body text with some flex columns, and I give them height:100% because I want them to stretch to the bottom, the newdiv actually gets a height greater than 100% of it's container and causes everything to scroll. Why doesn't 100% mean 100% here?
<body style="margin:0">
<div style="height:100%;display:flex;flex-direction:column">
<div style="background:#d0d0ff">
This is a header
</div>
<div style="background:#d0ffd0;flex-grow:1">
<!-- The new part -->
<div id='newdiv' style="display:flex;flex-direction:row; height:100%">
<div style="background:#ffd0d0"> Col 1 </div>
<div> Col 2 </div>
</div>
</div>
</div>
</body>
The reason you're getting the vertical scrollbar is because you're telling the div parent of col1 and col2 to be height: 100%. This by itself gives it the full height of the viewport.
From your code:
<div id='newdiv' style="display:flex; flex-direction:row; height:100%">
<div style="background:#ffd0d0"> Col 1 </div>
<div> Col 2 </div>
</div>
Except this div has a sibling: the header div, which is also taking up space.
So when the browser does it's height calculation, here is the result:
100% + (computed height of header div) > viewport height = vertical scrollbar
Instead of using defined heights, consider letting flexbox do the work. By default, flex items expand the full length of the container along the cross-axis.
So by simply declaring display: flex, child elements will expand to fill all available space (with no vertical scroll). But since a height rule will override this flex setting, we need to remove height: 100% from any flex items.
html, body { height: 100%; }
<body style="margin:0">
<div style="height:100%;display:flex;flex-direction:column">
<div style="background:#d0d0ff">
This is a header
</div>
<div style="background:#d0ffd0;flex-grow:1; display: flex;"><!--adjustment here-->
<div id='newdiv' style="display:flex;"><!--adjustment here-->
<div style="background:#ffd0d0; display: flex;"> Col 1 </div>
<div> Col 2 </div>
</div>
</div>
</div>
</body>
There are two adjustments to the original code.
added display: flex
removed height: 100%
Fiddle Demo
I would do it like this. demo
<body>
<header>Header</header>
<div class="body">
<aside>abc</aside>
<div class='inner'>content here</div>
</div>
</body>
In your css
html,body{
height: 100%;
}
body{
display: flex;
flex-direction: column;
}
.body{
flex-grow:1;
display: flex;
align-items: stretch;
}
.inner{
flex-grow: 1;
}
and this gives you a better html structure and maintainability
What about this? - http://codepen.io/arianalynn/pen/WragJP?editors=1010
<style>
body, html {margin:0;height:100%;width:100%;padding:0}
</style>
<body>
<div style="height:100%;display:flex;flex-direction:column">
<div style="background:#d0d0ff">
This is a header
</div>
<div style="background:#d0ffd0;flex-grow:1;display:flex;flex-direction:row; height:100%;-webkit-align-items:stretch">
<div style="background:#ffd0d0"> Col 1 </div>
<div style="background:red"> Col 2 </div>
</div>
</div>
</body>
I have updated your code try if this helps you.
set the height to
100vh https://jsfiddle.net/ok20071g/1/
Related
I want the page to be 100vh in height, so that there are no scrollbars on the whole page. For some reason the main grid is bigger than the screen size and some of the elements are getting clipped.
<html>
<body>
<div id="root">
<div class="app_container">
<div class="navigation">
<div class="navigation_logo_container"><img src="/icon.9c86b69e.png"
class="navigation_logo"><span>Sample</span></div>
<div class="navigation_buttons_container">
<div><span>Sample</span></div>
<div><span>Sample</span></div>
<div><span>Sample</span></div>
<div><span>Sample</span></div>
</div>
</div>
<div class="game">
<div class="quiz"><span class="question_text">Sample</span>
<div class="answer_choices">
<div class="answer_choice"><span>Sample</span></div>
<div class="answer_choice"><span>Sample</span></div>
<div class="answer_choice"><span>Sample</span></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Codepen: https://codepen.io/GuacomoleCyclone/pen/RwKjmzO
Base on your setup the 100vh is working but your children are adding to the cause...
Meaning you have nav with height on fit-content...so lets just say 65px;
but then you have game div at height: 100%
If you remove that nav it works as you want, ..so for easily to solve this, you would have to also equate that extra height besides 100% game(nav height).
So meaning you would have to give:
.game {
height: calc(100% - 65px);
}
There are other ways to solve your setup without doing this but this is one of them.
I have a div whose size depends on its content.
I want to have an absolute child which takes the whole space.
In Firefox I get the wanted result but not in Chromium.
How to fix it?
Which browser is rendering against the specification?
<div style="position:relative;float:left;">
<div style="position:absolute;display:table;left:0;top:0;height:100%;width:100%;background:red;">
<div style="display:table-cell;vertical-align:middle;">TEST</div>
</div>
<!-- this is an img in real with unknown size -->
<div style="width:200px;height:200px;background:yellow"></div>
</div>
You just need to change the display of this div to display:flex and use margin: auto to center the text:
<div style="position:relative;float:left">
<div style="position:absolute;display:flex;left:0;top:0;height:100%;width:100%;background:red;">
<div style="margin: auto">TEST</div>
</div>
<!-- this is an img in real with unknown size -->
<div style="width:200px;height:200px;background:yellow"></div>
</div>
Or with display: flex and align-items: center:
<div style="position:relative;float:left">
<div style="position:absolute;display:flex;left:0;top:0;height:100%;width:100%;background:red;align-items: center">
<div>TEST</div>
</div>
<!-- this is an img in real with unknown size -->
<div style="width:200px;height:200px;background:yellow"></div>
</div>
I have a container, with two containers inside of it.
<div id="container">
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3...4...">
</div>
</div>
I want the main container to span the entire width of the page. (Width: 100%;)
I want the two child containers to evenly spread and fill the horizontal space on the page.
I want to be able to add say a third or even forth child container and have them all fill from 50% 50% to ~33% ~33% ~33% to 25% 25% 25% 25% and so on...
If there a way to do this easily? Sorry if I didn't explain this well, it is my first time asking a question.
Simply use flex by specifying display:flex on the container and then flex:1 (or flex-grow:1 on the child elements like this :
.container {
display: flex;
}
.container .box {
flex: 1; /*or also `flex-grow:1` */
min-height: 100px;
border: 1px solid red;
}
<!-- container with 2 elements -->
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
</div>
<!-- container with 3 elements -->
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<!-- container with 4 elements -->
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
Refering to the documentation :
The flex-grow CSS property specifies the flex grow factor of a flex
item. It specifies what amount of space inside the flex container the
item should take up. The flex grow factor of a flex item is relative
to the size of the other children in the flex-container.
You can read more about flex property and flex-grow property
I want to know how can I extend every DIVs inside a div wrapper. My div wrapper is fixed and has a width of 980px.
My HTML goes here:
<div id="wrapper" >
<div id="header" >
<strong>HEADER</strong>
</div>
<nav>
<strong>Navigation</strong>
</nav>
<div id="content" >
<div class="sidebar" >
<p>sidebar</p>
</div>
<div class="main-content" >
<p>content goes here.....</p>
</div>
</div>
<footer>
<strong>copyright etc....</strong>
</footer>
</div>
Here's the FIDDLE
What I want to achieve is every DIVs which hasbackground-color will expand and max-out the width of wrapper or something like filling the width of body to the fullest. But the content or texts must still has the width of 980px and is fixed. Thanks in advance.
Check this Demo
.div-inner {
width: 500px;
margin: 0 auto;
}
If I try to apply min-width, max-width to a floating div so that it expands to max-width when the right content is hidden does not work.
But, if I use table and 2 tds in it, the left td will expand to 100% if the right td is hidden.
Can I achieve this table effect with floated divs?
I don't think you can do what you are asking, but you can make it look like what you are asking.
Make it into two tds and put a max-width on a div inside the td. Would that work?
This isn't going to work with floats. Luckily we now have more tools at our disposal.
Here are two very simple methods to expand a div to 100% of the available width if a sibling horizontally to it is hidden or removed.
#1 – Using display: flex
Compatibility: Edge and all modern browsers. IE 10 and 11 support the non-standard -ms-flexbox.
The Basic Markup
<div class="container">
<div>
First Column
</div>
<div>
This second column can be hidden or not exist and the first column will take up its space
</div>
</div>
The CSS
The container div is given display: flex.
The containers children are give flex: 1 and they will be assigned equal width, can grow and can shrink.
.container {
width: 500px;
display: flex;
}
.container>div {
flex: 1;
background: #FF6961;
height: 200px;
margin-bottom: 20px;
}
.container>div:nth-child(even) {
background: #006961;
}
<div class="container">
<div>
Content
</div>
<div>
Content
</div>
</div>
<div class="container">
<div>
Content takes up the whole width when other divs are hidden.
</div>
<div style="display: none">
Content
</div>
</div>
<div class="container">
<div>
Content takes up the whole width when there is no other div.
</div>
</div>
Read this guide to flexbox
Read more about flexbox on the MDN
#2 – Using display: table
Compatibility: IE8+ and all modern browsers
The Basic Markup
<div class="container">
<div>
First Column
</div>
<div>
This second column can be hidden or not exist and the first column will take up its space
</div>
</div>
The CSS
The container is given display: table
The containers children are given display: table-cell and will act the same as cells in an HTML table. If a cell is hidden or is removed the other cell will take its space.
.container{
display: table;
width: 600px;
margin: 20px;
}
.container>div {
display: table-cell;
height: 200px;
background: #FF6961;
}
.container>div:nth-child(even) {
background: #006961;
}
<div class="container">
<div>
Content
</div>
<div>
Content
</div>
</div>
<div class="container">
<div>
Content takes up the whole width when other divs are hidden.
</div>
<div style="display: none">
Content
</div>
</div>
<div class="container">
<div>
Content takes up the whole width when there is no other div.
</div>
</div>
<div class="container">
<div>
Content takes up the remaining width if a cell has a fixed width.
</div>
<div style="width: 200px">
Content
</div>
</div>
Read more about CSS tables on the MDN