This question already has answers here:
Why doesn't height: 100% work to expand divs to the screen height?
(12 answers)
Closed 9 years ago.
How Can I create a 100% height div of the current viewport size?
I know there are many resolutions around there, and I want to create a div that is high enough to cover the current size of the viewport.
Suppose the viewport is at the moment the size of one of a 1920x1080 resolution screen, but Also, someone else from a 1024x768 resolution screen wants to view the page, I want the div to be displayed 100% of the height of the viewport it is displayed on.
Is it possible with just css?
give 100% height to html and body, as well as to the div.
You can use a fixed position.
Add this to the body:
<div style="position:fixed; width:100%; height:100%; top:0; left:0;"></div>
Related
This question already has answers here:
CSS get height of screen resolution
(10 answers)
Percentage Height HTML 5/CSS
(7 answers)
Closed 2 years ago.
I have an HTML div-container that should contain div-containers that are all as big as the browserwindow so for instance when my browser window is 200px high and 100px wide every container should be 200px high and 100px wide. This is the parent container that contains all of the children-containers:
.largest_parent_container {
width: 100%;
position: absolute;
}
This is my current style for the child containers:
.children_container {
height: 100%;//doesnt work because it takes the height of the absolute parent container.
width: 100%;
position: absolute;
}
So I hope you understand my problem.
I would be really happy if you could help me.
Have a nice day.
Consider using viewports. In CSS, viewports are specified as vw or vh (viewport width and viewport height respectively).
So, If you wanted something to be the height of the browser window, you would say height: 100vh, which effectively means 100% of the viewport height.
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 2 years ago.
I am css begginer and i have a problem with div arrengment.
I want to place a div in the top part of the screen, 150px 100% width.
and another div right below which will take the reminder part of the screen.
If I add the second div "height: 100%" it surpass the screen size and makes me scroll and i dont want that. just that it will take the free screen area, and adjust to window size.
thank you!!
#top{
background-color:blue;
height:150px;
}
#bottom{
background-color:green;
height:calc(100vh - 150px - 16px) ;
}
<div id='top'></div>
<div id='bottom'></div>
This question already has answers here:
Bootstrap 3 two columns full height
(19 answers)
How can I make Bootstrap columns all the same height?
(34 answers)
Closed 4 years ago.
I'm trying to set 100% of height to a HTML element.
On mobile, this div will go under the .div_left div, and the floating will be cleared.
I have these divs on my theme:
<div class="col-md-7 div_left"></div>
<div class="col-md-5 div_right"></div>
<div class="clearfix"></div>
I give them this css: (global bootstrap.css also included)
.div_left{ background:#fff; padding:40px;}
.div_right{ background:#ccc; padding:40px; height:100%;}
I tryed height:100vh; but that's not working, when the page has to many content, and I can scroll it vertically.
I also tryed min-height:100% but that didn't work. I can see the right div gray background, but that's just because it has padding.
Screenshot here
Second try:
Second image
Use min-height 100vh on the entire row...
.div_left{ background:#fff; padding:40px;}
.div_right{ background:#ccc; padding:40px;}
.mvh-100 {
min-height: 100vh;
}
https://www.codeply.com/go/vTYz8XE6cG
Desktop:
Mobile:
To use height:100%; a parent element should have a height: fixedHeight; because that it's not working for you.
https://www.w3schools.com/cssref/pr_dim_height.asp
% Defines the height in percent of the containing block
What you need to define is: 100% of what?
Here's more information about vh
Make a div 100% height of the browser window
There says:
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.
This question already has answers here:
Fit div size to background image
(3 answers)
Size the DIV to the size of the background image
(3 answers)
Closed 4 years ago.
I have a div with some content and want to have a background image. However, I want to be able to see the full height of the image. I could add a load of padding to the top and bottom of the content but I want this to be dynamic for all screen sizes.
div{
background-image:url(https://via.placeholder.com/350x150);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/* height 100%; */
text-align:center;
}
<div>
Some content
</div>
I know I could also just add an <img> tag to the <div> but there is a lot of content in this that would then have to be floated around to overlay the image.
I don't mind using JS/jQuery to resolve this.
To make something fit the full height of the screen instead of using 100% as you would for width, using vh, so in your case:
height: 100vh;
This will work dynamically depending on the users screen dimensions, you can read more about this as well as see examples here.
This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 7 years ago.
I have a div with width:100%, and I need the height of the same div to adjust according to how many pixels wide the page is. The reason is because an image is stretched across full width of the div, and if I set a solid height, different resolutions will render it differently and the image looks stretched out.
Is there a css solution to this?
You could leave it as auto:
<div id="mydiv"><img src="..." /></div>
#mydiv,#mydiv>img{width:100%; /*height:auto;*/}
You can omit height:auto because is the default value.
you can do that with css media queries see http://www.w3.org/TR/css3-mediaqueries/
basically you'll have a bunch of media queries like the following:
#media (min-width: 1024px) {
div {height: 200px;}
}
obviously change the width and height combinations to whatever you need, and you can also use max-width or width as required