Tìm kiếm cho:
I have a layout with two columns - a left div and a right div.
The right div has a grey background-color, and I need it to expand vertically depending on the height of the user's browser window. Right now, the background-color ends at the last piece of content in that div.
I've tried height:100%, min-height:100%;, etc.
height property with percentage values: stackoverflow.com/a/31728799/3597276 - anyone There are a couple of CSS 3 measurement units called:
From the linked W3 Candidate Recommendation above:
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
These units are vh (viewport height), vw (viewport width), vmin (viewport minimum length) and vmax (viewport maximum length).
For this question, we can make use of vh: 1vh is equal to 1% of the viewport's height. That is to say, 100vh is equal to the height of the browser window, regardless of where the element is situated in the DOM tree:
<div></div>
div {
height: 100vh;
}
This is literally all that's needed. Here is a JSFiddle example of this in use.
This is currently supported on all up-to-date major browsers apart from Opera Mini. Check out Can I use... for further support.
In the case of the question at hand, featuring a left and a right divider, here is a JSFiddle example showing a two-column layout involving both vh and vw.
100vh different from 100%?Take this layout for example:
<body style="height: 100%">
<div style="height: 200px">
<p style="height: 100%; display: block;">Hello, world!</p>
</div>
</body>
The p tag here is set to 100% height, but because its containing div has 200 pixels height, 100% of 200 pixels becomes 200 pixels, not 100% of the body height. Using 100vh instead means that the p tag will be 100% height of the body regardless of the div height. Take a look at this accompanying JSFiddle to easily see the difference!
Answered 2023-09-20 20:26:57
min-height:100vh seems to work around this. - anyone If you want to set the height of a <div> or any element, you should set the height of <body> and <html> to 100% too. Then you can set the height of element with 100% :)
Here is an example:
body, html {
height: 100%;
}
#right {
height: 100%;
}
Answered 2023-09-20 20:26:57
html { height: 100%*number of blocks; }, body { height: 100%;}, #div { height: 100%/number of blocks; }. So if you have 3 sections, it will be html { height: 300%; } body { height: 100%; } #div { height: 33.3% } - anyone If you’re able to absolutely position your elements,
position: absolute;
top: 0;
bottom: 0;
would do it.
Answered 2023-09-20 20:26:57
position:relative and its height is not 100% of the viewport. It will adjust top and bottom to it's next relative or absolute ancestor. - anyone You can use the view-port unit in CSS:
HTML:
<div id="my-div">Hello World!</div>
CSS:
#my-div {
height: 100vh; /* vh stands for view-port height, and 1vh is 1% of screen height */
}
Answered 2023-09-20 20:26:57
* { box-sizing: border-box; } to prevent that from happening. - anyone You can use vh in this case which is relative to 1% of the height of the viewport...
That means if you want to cover off the height, just simply use 100vh.
Look at the image below I draw for you here:
Try the snippet I created for you as below:
.left {
height: 100vh;
width: 50%;
background-color: grey;
float: left;
}
.right {
height: 100vh;
width: 50%;
background-color: red;
float: right;
}<div class="left"></div>
<div class="right"></div>Answered 2023-09-20 20:26:57
paddings/margins - anyone All the other solutions, including the top-voted one with vh are sub-optimal when compared to the flex model solution.
With the advent of the CSS flex model, solving the 100% height problem becomes very, very easy: use height: 100%; display: flex on the parent, and flex: 1 on the child elements. They'll automatically take up all the available space in their container.
Note how simple the markup and the CSS are. No table hacks or anything.
The flex model is supported by all major browsers as well as IE11+.
html, body {
height: 100%;
}
body {
display: flex;
}
.left, .right {
flex: 1;
}
.left {
background: orange;
}
.right {
background: cyan;
}<div class="left">left</div>
<div class="right">right</div>Learn more about the flex model here.
Answered 2023-09-20 20:26:57
overflow-y: auto; may avoid "containers exceeds the original body height". - anyone body also needs margin: 0px - anyone You don't mention a few important details like:
Here's one possibility:
body,
div {
margin: 0;
border: 0 none;
padding: 0;
}
html,
body,
#wrapper,
#left,
#right {
height: 100%;
min-height: 100%;
}
#wrapper {
margin: 0 auto;
overflow: hidden;
width: 960px; /* Width optional */
}
#left {
background: yellow;
float: left;
width: 360px; /* Width optional, but recommended */
}
#right {
background: grey;
margin-left: 360px; /* Must agree with previous width */
}<html>
<head>
<title>Example</title>
</head>
<body>
<div id="wrapper">
<div id="left">
Left
</div>
<div id="right"></div>
</div>
</body>
</html>There are many variations on this depending on which columns need to be fixed and which are liquid. You can do this with absolute positioning too but I've generally found better results (particularly in terms of cross-browser) using floats instead.
Answered 2023-09-20 20:26:57
This is what worked for me:
<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; background: red;"> </div>Use position:fixed instead of position:absolute, that way even if you scroll down the division will expand to the end of the screen.
Answered 2023-09-20 20:26:57
Here's a fix for the height.
In your CSS use:
#your-object: height: 100vh;
For browser that don't support vh-units, use modernizr.
Add this script (to add detection for vh-units)
// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
var bool;
Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {
var height = parseInt(window.innerHeight/2, 10),
compStyle = parseInt((window.getComputedStyle ?
getComputedStyle(elem, null) :
elem.currentStyle)["height"], 10);
bool = !!(compStyle == height);
});
return bool;
});
Finally use this function to add the height of the viewport to #your-object if the browser doesn't support vh-units:
$(function() {
if (!Modernizr.cssvhunit) {
var windowH = $(window).height();
$('#your-object').css({'height':($(window).height()) + 'px'});
}
});
Answered 2023-09-20 20:26:57
Even with all of the answers here, I was surprised to find that none really solved the problem. If I used 100vh height/min-height, the layout broke when the content was longer than a page. If I instead used 100% height/min-height, the layout broke when the content was less than the page height.
The solution I found, which solved both cases, was to combine the top two answers:
html, body, #mydiv {
height: 100%;
min-height: 100vh;
}
Answered 2023-09-20 20:26:57
100vw = 100% of the width of the viewport.
100vh = 100% of the height of the viewport.
If you want to set the div width or height 100% of browser-window-size you should use:
For width: 100vw
For height: 100vh
Or if you want to set it smaller size, use the CSS calc function. Example:
#example {
width: calc(100vw - 32px)
}
Answered 2023-09-20 20:26:57
Try this - tested:
body {
min-height: 100%;
}
#right, #left {
height: 100%;
}
In later versions, you can use vh:
#right, #left {
height: 100vh
}
Answered 2023-09-20 20:26:57
100% works differently for width and height.
When you specify width: 100%, it means "take up 100% of the available width from the parent element or width of the window."
When you specify height: 100%, it only means "take up 100% of available height from the parent element." This means if you don't specify a height at a top level element, the height of all the children will be either 0 or height of the parent, and that is why you need to set the topmost element to have a min-height of window height.
I always specify the body to have a min-height of 100vh and it makes positioning and calculations easy,
body {
min-height: 100vh;
}
Answered 2023-09-20 20:26:57
A full page is called a 'viewport' and you can design an element according to its viewport in CSS 3.
Such units are called viewport-percentage lengths and are relative to the size of the initial containing block.
vh. The complete height of a page is
100vh.vw. The complete height of a page is
100vw.So now, your problem can easily be solved by adding the following to your CSS:
.classname-for-right-div /* You could also use an ID */ {
height: 100vh;
}
Here is information about the Viewport-relative lengths.
Answered 2023-09-20 20:26:57
Add min-height: 100% and don't specify a height (or put it on auto). It totally did the job for me:
.container{
margin: auto;
background-color: #909090;
width: 60%;
padding: none;
min-height: 100%;
}
Answered 2023-09-20 20:26:57
The simplest way is to do it like this.
div {
background: red;
height: 100vh;
}
body {
margin: 0px;
}<div></div>Answered 2023-09-20 20:26:57
If you set the html and body_ height to 100%, it will cover the whole page.
And if you set any particular div minimum height to 100%, so it will cover the whole window like this:
CSS
html, body {
height: 100%;
}
div#some-div {
min-height: 100%;
}
Remember
This will only work if the div's direct parent is body, as percentage always inherited from the direct parent and by doing the above CSS code you are telling the div to inherit the height 100% from the direct parent (body) and make it your min-height: 100%.
Another way
Simply set the div height to 100vh. It means 100 viewport height.
CSS
div#some-div {
height: 100vh
}
Answered 2023-09-20 20:26:57
minHeight: 100vh won't work - it needs to be height: 100vh otherwise children set to height: 100% won't resize - anyone min-height:100vh anywhere in the answer. The question is how to make a div 100% of browser window. - anyone There are several methods available for setting the height of a <div> to 100%.
Method (A):
html,
body {
height: 100%;
min-height: 100%;
}
.div-left {
height: 100%;
width: 50%;
background: green;
}
.div-right {
height: 100%;
width: 50%;
background: gray;
}<div class="div-left"></div>
<div class="div-right"></div>Method (B) using vh:
html,
body {
height: 100%;
min-height: 100%;
}
.div-left {
height: 100vh;
width: 50%;
background: green;
float: left;
}
.div-right {
height: 100vh;
width: 50%;
background: gray;
float: right;
}<div class="div-left"></div>
<div class="div-right"></div>Method (c) using flex box:
html,
body {
height: 100%;
min-height: 100%;
}
.wrapper {
height: 100%;
min-height: 100%;
display: flex;
}
.div-left {
width: 50%;
background: green;
}
.div-right {
width: 50%;
background: gray;
}<div class="wrapper">
<div class="div-left"></div>
<div class="div-right"></div>
</div>Answered 2023-09-20 20:26:57
Try to set height:100% in html & body
html,
body {
height: 100%;
}
And if you want to 2 div height same use or set the parent element display:flex property.
Answered 2023-09-20 20:26:57
This worked for me:
html, body {
height: 100%; /* IMPORTANT!!! Stretches viewport to 100% */
}
#wrapper {
min-height: 100%; /* Minimum height for a modern browser */
height:auto !important; /* Important rule for a modern browser */
height:100%; /* Minimum height for Internet Explorer */
overflow: hidden !important; /* Firefox scroll-bar */
}
Taken from this page.
Answered 2023-09-20 20:26:57
Here is something that is not exactly like what you had in previous answers, but it could be helpful to some:
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0px;
}
#one {
background-color: red;
}
#two {
margin-top: 0px;
background-color: black;
color: white;
overflow-y: scroll;
}
Answered 2023-09-20 20:26:57
Block elements consume the full width of their parent, by default.
This is how they meet their design requirement, which is to stack vertically.
9.4.1 Block formatting contexts
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block.
This behavior, however, does not extend to height.
By default, most elements are the height of their content (height: auto).
Unlike with width, you need to specify a height if you want extra space.
Therefore, keep these two things in mind:
.Contact {
display: flex; /* full width by default */
min-height: 100vh; /* use full height of viewport, at a minimum */
}
.left {
flex: 0 0 60%;
background-color: tomato;
}
.right {
flex: 1;
background-color: pink;
}
body { margin: 0; } /* remove default margins */<div class="Contact">
<section class="left">
<div class="">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
</div>
</section>
<section class="right">
<img />
</section>
</div>Answered 2023-09-20 20:26:57
One of the options is using CSS table. It has great browser support and even works in Internet Explorer 8.
html, body {
height: 100%;
margin: 0;
}
.container {
display: table;
width: 100%;
height: 100%;
}
.left, .right {
display: table-cell;
width: 50%;
}
.right {
background: grey;
}<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>Answered 2023-09-20 20:26:57
Try this once...
* {
padding: 0;
margin: 0;
}
.parent_div {
overflow: hidden;
clear: both;
color: #FFF;
text-align: center;
}
.left_div {
float: left;
height: 100vh;
width: 50%;
background-color: blue;
}
.right_div {
float: right;
height: 100vh;
width: 50%;
background-color: green;
}<div class=" parent_div">
<div class="left_div">Left</div>
<div class="right_div">Right</div>
</div>Answered 2023-09-20 20:26:57
Just use the "vh" unit instead of "px", which means view-port height.
height: 100vh;
Answered 2023-09-20 20:26:57
Flexbox is a perfect fit for this type of problem. While mostly known for laying out content in the horizontal direction, Flexbox actually works just as well for vertical layout problems. All you have to do is wrap the vertical sections in a flex container and choose which ones you want to expand. They’ll automatically take up all the available space in their container.
Answered 2023-09-20 20:26:57
You can use display: flex and height: 100vh
html, body {
height: 100%;
margin: 0px;
}
body {
display: flex;
}
.left, .right {
flex: 1;
}
.left {
background: orange;
}
.right {
background: cyan;
}<div class="left">left</div>
<div class="right">right</div>Answered 2023-09-20 20:26:57
You need to do two things, one is to set the height to 100% which you already did. Second is set the position to absolute. That should do the trick.
html,
body {
height: 100%;
min-height: 100%;
position: absolute;
}
Answered 2023-09-20 20:26:57
vh instead. - anyone vh if you plan to use responsive design on mobile devices. - anyone Now use height: 100vh; for a fixed window height:
<style>
.header-top {
height: 100vh;
background: #000;
color: #FFF;
display: flex;
align-items: center;
padding: 10px;
justify-content: space-around;
}
.header-top ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
}
.header-top ul li {
padding:0px 10px;
}
</style>
<div class="header-top">
<div class="logo">Hello</div>
<ul>
<li>Menu</li>
<li>About Us</li>
<li>Contact US</li>
<li>Login</li>
</ul>
</div>
Answered 2023-09-20 20:26:57
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
height: 100vh; /* Height window (vh) */
}
.wrapper .left{
width: 80%; /* Width optional, but recommended */
}
.wrapper .right{
width: 20%; /* Width optional, but recommended */
background-color: #DD1F26;
}<!--
vw: hundredths of the viewport width.
vh: hundredths of the viewport height.
vmin: hundredths of whichever is smaller, the viewport width or height.
vmax: hundredths of whichever is larger, the viewport width or height.
-->
<div class="wrapper">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>Answered 2023-09-20 20:26:57
widht (near the end) - anyone
DEVSNE.VN