Setting the inner height of the document <div>
I am trying to place some html elements <div>
like in the picture:
The problem here is # the height of the container . By setting a fixed value or percentage, it will either leave the empty space at the bottom or bypass the html height.
I tried setting it to 90% (10% for #title), but it doesn't exactly depend on the client's height; What I am so far is:
body, html{ height: 100%; margin: 0px}
#container{ height: 90%; overflow: scroll;}
Given that the height #title can also change whether you can use css to match #title
and #container
in html?
source to share
Two parameters, flex
display or CSS statement calc
.
It's probably easier for you to fix this problem if you know what your headline will be anyway. In this case, you use calc
like this:
header {
height: 190px; /* Or whatever you'd like it to be */
}
.container {
height: calc(100% - 190px); /* Where 190px is whatever height the header is set to */
overflow: auto; /* Or scroll, if you want the scrollbar always visible */
}
In a less ideal case, you need to use flex
flexbox for display.
It will look something like this:
body {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
header {
height: 10%; /* Or whatever */
flex: none;
}
.container {
align-self: flex-end;
flex: 1 0 100%;
}
Go through this one. If you need broader support, you are missing most of the products you need, but are flex
displayed in almost all major browsers.
We first set up body
to tell the display: flex
browser that this is a layout flex
. We also install flex-direction
and flex-wrap
. These properties should be fairly self-explanatory.
Second, we set the title to a fixed display. We make it through height: 10%
, but the value can be whatever you want. flex: none
tells the browser that this element is unchanged in context flex
. If you think of the display as a river, it's a rock sitting in the middle.
Third, we set the container to align at the bottom of the page with align-self: flex-end
. This is so that it will always be at the bottom, regardless of other elements on the page. This is not very important as we are not wrapping (setting in an element body
), but here we are lighting the bases. An important part flex: 1 0 100%
. Simply put, it says:
- Increase the ratio
1
(100%) in relation to all other flexible members (in this simple case, not). - Do not shrink at all (reduce the ratio
0
). - Set the default height
100%
(or as close to it as possible).
Hope it helps!
source to share
Instead of setting overflow: scroll
to #container
, you can set #title
with position: fixed;
or position: absolute;
and give #container
a margin-top
that matches the #title
height value .
I always suggest this route through overflow: scroll
and if possible use the browser's built-in scrolling.
Suggested CSS:
#title {
height: 190px;
left: 0;
position: fixed;
right: 0;
top: 0;
}
#container {
margin-top: 200px;
}
source to share
Not really sure about your problem, but if you know the height title
, you can easily create it like this (using percentages):
html
{
height: 100%;
}
body
{
height: 100%;
margin: 0;
padding: 0;
}
#title
{
background: green;
height: 10%;
}
#container
{
background: red;
height: 90%;
overflow: scroll;
}
#gallery
{
background: blue;
height: 5000px;
margin: 10px auto;
width: 70%;
}
<div id="title"></div>
<div id="container">
<div id="gallery">
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling<br>
scrolling
</div>
</div>
Use height: calc(100% - 100px)
for #container
if the height #title
is in pixels.
If the altitude is #title
unknown, you can use something using display: table
and display: table-cell
(or flex
if you are feeling adventurous).
source to share