Как сделать div с height 100% с помощью CSS.

При верстке макетов можно столкнуться с ситуацией, что какой-либо блок, который чаще всего представляет собой колонку макета, нужно растянуть на 100% по высоте экрана монитора.

Сначала решение этой задачи может показаться довольно простой, казалось бы, что нужно задать для блока свойство height со значением 100%.

Но, как видите это свойство не работает. Блок не хочет растягиваться на всю ширину окна браузера.

Как решить эту проблему? Почему не работает свойство height:100%?

Все дело в том, что 100% должны браться от высоты родительского элемента. А какая у нас высота родительского элемента? Для элемента div, в данном примере, этими родительскими элементами являются элементы body и html.

По умолчанию, свойство height этих элементов принимает значение auto, а значит эти элементы имеют такую высоту, чтобы вместить в себе всю содержимое и не больше.

Чтобы изменить ситуацию, родительским элементам body и html также нужно добавить свойство height 100%.

Давайте посмотрим, что из этого получиться.

Ну, вот, совсем другое дело. Теперь наш блок растянут на 100% высоты. Используйте это на практике.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

Или зарегистрируйтесь через социальные сети:

div height:100%; not working with display:table-cell;

My code was working when

But not working when i added display:table-cell; to div for using vertical-align

I want the div to cover the whole white space in body

3 Answers 3

Your code should work now.

Rule of thumb : Always have a proper markup whenever display : table-cell is concerned.

@Ashwin, Why use display : table; and display : table-cell; when you can simply use

and

? – Pacerier May 7 ’14 at 4:00

You have to set the height to 100% for all parent elements then.

Give it a try, it worked for me. And better remove all the CSS properties you set to the body-element before.

Having div.table > div.table-row > table.table-cell with height of its container is a bit tricky thing. One of the easiest way is that you can add

in this case if you will add

That will fit its parent height.

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.4.16.39093

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

How can I make a div 100% height fixed?

I want to a div with 100% height but fixed position like right side of this website: http://www.dast2.com

I know these are required: height:100%; position:fixed;

but it doesn’t work for me.

8 Answers 8

Old but here it goes:

Viewport Height (vh). This unit is based on the height of the viewport. A value of 1vh is equal to 1% of the viewport height.

follow this and give 100% to the div

Browsers dont calculate height so well. height: auto means ‘get the same height as your content’. But height: 100% doesn’t always plays well, because the content of an element defines its height. So the body height is defined by its content. So when you instruct your content to have height: 100% , you instruct it to have the same height as the body, but the body is the same height as the content, so you instruct it to be as tall as itself.

You must provide height to body and html ( root element ).

In this case, I made a demo, which I provided the html element a ridiculus height: 10000px .

For the sidebar ( the one with the red color ) the only property you need is the min-height: 100% property. The sidebar will take all of its vertical space as you can see in the demo below. Just added position: fixed; and right:0 to make it fixed at the right.

Here is the demo

Quick Note: If you ever want to have the same effect on live site, just inspect the page with the developer tools and grab the css/markup that fit your needs.

CSS div height 100% not working

div2 is 1000px height because of div4, div5 and div6. I’m not understanding why div3 isn’t getting the 100% height, it is 0px height.

3 Answers 3

You could set the height of parent div1 to 1000px and set the children’s height to :inherit . Here’s an example:

It could be a workaround. I hope it helps.

The root of your problem, because it’s a div within a div 100% takes value from its container, as in, if the parent div had a height of 50px, 100% on the child div would mean it would have the height of 50px but your parent div has the height of auto so it’s taken whatever height that is 🙂 hope this helps :p

Using a percentage based height relies on an explicit height value being set on the parent element:

Specifies a percentage height. The percentage is calculated with respect to the height of the generated box’s containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to ‘auto’. A percentage height on the root element is relative to the initial containing block.

In this case the parent element is #div2 which has height: auto; . This means that its height depends on the height of its content and is not explicitly declared.

If you were to apply the height explicitly to #div2 (e.g. height: 1000px; ) then using height: 100%; on #div3 would work.

One possible way of ensuring that #div3 uses the full height without setting it explicitly on #div2 is to use flexbox .

Making div 100% height of browser window

I have two columns for my website and right now the background color ends at the last piece of content in the left column (which is for navigation).

I’ve tried height:100%, min-height:100%; etc. Doesn’t seem to work. here’s the css.

4 Answers 4

Use viewport height — vh.

Update

Please note, there are potential issues with using VH on Safari iOS. See this thread for more information: Chrome / Safari not filling 100% height of flex parent

Set the body height too

The reason the div doesn’t fill the entire window by default if because it’s parent, the tag probably, only stretches as heigh as it needs to. Add this at the top of your stylesheet (I like to order styles in a similar order to that of the tags in the markup):

This css code is for your solution.

Not the answer you’re looking for? Browse other questions tagged css or ask your own question.

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.4.16.39093

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.