Html css wrapper height

HTML wrapper won’t expand the full height of page

My website wrapper will not fill in the entire height of the page. I have tried adjusting the min-height to 100%, tried just height 100% as well. I have tried auto height. I am sure it is something simple I am missing but I can’t seem to find the solution to this problem. I have also tried just adding the CSS to the HTML page using the tag but that does not work either.

body < font-family: Verdana, Arial, sans-serif; background-color: #00005D; min-height: 100%; margin: 0; >html < min-height: 100%; margin: 0; >#wrapper < background-color: #b3c7e6; width: auto; min-height: 100%; overflow: hidden; >nav < float: left; width: 150px; padding-top: 50px; >#rightcol < margin-left: 155px; background-color: #ffffff; color: #000000; >header < background-color: #869dc7; color: #00005D; font-size: 100%; padding-left: 30px; padding-bottom: 3px; padding-top: 3px; >h2 < color: #869dc7; font-family: arial, sans-serif; >main < display: flex; padding: 20px 20px 20px; >#floatright < margin: 10px; float: right; >nav a

 
  
 
 
CRIF Access
 
 
This is just a test sentence for the main section of the page.
 
 
 

Источник

Как сделать wrapper на весь экран?

https://drive.google.com/file/d/0B8w9w07H1SsdTUc4d3kzbTZnS2s/edit?usp=sharing https://drive.google.com/file/d/0B8w9w07H1SsdTy1wZkllRG55Sm8/edit?usp=sharing Подскажите, как сделать wrapper на весь экран. Только не в px а в %. Пробовал height на 100% — ничего. Нужно, чтобы шапка и футер прижимались к краям браузера и центральные блоки тянусь за ними в зависимости от размера экрана. Только одна оговорка, только css.

1 ответ 1

Ну, во-первых, высоту все равно нельзя увеличить на 100%, по крайней мере мне — не удавалось. А вот что касается прилипающего футера — не проблема. Для начала тег футера надо вытащить за пределы враппера т.е.

HTML, BODY, .wrapper < height: 100%; >/* Относится */

BODY .wrapper

.wrapper < margin: 0 auto;
width: 940px; padding: 0 0 113px; /* Относится*/ height: 600px; >

.footer < margin: -113px auto 0; >/* Относится */

Там, где стоит «относится», это важно, кстати, вы можете высоту враппер-блоку указать как min-height: 200px; т.е. высота по любому быть должна.

P.S. Мне только непонятна формулировка:
Нужно что бы шапка и футер прижимались к краям браузер и центральные блоки тянусь за ними в зависимости от размера экрана.
ЭТО КАК? Если вам нужна резиновая верстка, то делите ширину нужного блока на ширину враппера. Например, вам нужно, чтобы левый блок был 200px по дизайну, то в процентах будет 200/100=20% и т.д., и все. Если я не правильно вас понял, то объясните.

Источник

height and width on html and body elements

why does not my html, body and wrapper elements extend to 100% height of the browser/view port in FF13. The html, body and wrapper stop vertically about some distance from the bottom when looking in Firebug. The container div extends to the full height as it’s height is determined by the content. (1263px X 558px for html, body, wrapper) and (960px X 880px for container) Looking at default 100% the above happens as the first image below shows. But when I zoom to the last poosible zoom in, the above does not happen as the second image below shows and the html, body, wrapper extends to the full height. (4267px X 1860px for html, body, wrapper) — (960px X 1000px for container)

Wrapper and container are exactly like that on the .css? They should have a ‘#’ identifying them as ids.

2 Answers 2

Your html actually exactly extends to 100% height of your viewport cause viewport here is the browser window, not the inner content.

 
 
 
very much content
 
 
 #div1 < height:300px; overflow-y:scroll; border: 1px solid black; >#div2 < height:100%; >#div3

div1 here has the height of 300px and is scrolled. When you scroll content you simply move inner div but height remains untouched that is 300px . Exactly the same happens when you set height:100% to html. Your browser’s height remains the same.

When you zoomed out your viewport then you have not scroll, so inner content’s height is less than the height of viewport.

Shortly, html relates to parent’s height not to the height of the inner content

you can specify 3 types of values to the block-element’s height:

• length — set fixed height (i.g. ‘200px’, ’50em’). That’s all, I can say nothing more about that.
• percentage — from W3C spec:

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.

• auto — The height depends on the values of other properties. (Generally on the height of inner content: text, other inline elements, block elements etc.)

What is happening when browser shows your page:

1. it gets height: 100% for . That means that the resulting height is calculated with respect to the height of the generated box’s ( html -element in that case) containing block ( initial containing block , i.e. browser window in that case). Let’s say 1024px .
2. then it takes height: 100% for . It will set body ‘s height to the already calculated height of the html , that is 1024px .
3. then browser applies height:auto to the #wrapper and then the #container and the

   . I don’t know how it does that exactly but can suppose that it postpones the height setting (and respectively all other styles which depend on that i.e. backgrounds, borders etc.) and proceeds to the inner content.

4. next point is text content. Browser takes related properties specified or it’s own, that is default styles , like font-family, font-size and the height of the text.
5. after that it will set height to the

   -element so the

   will stretch down to contain all content (the text in that case). The same then happens to the #container and the #wrapper .

If it happens that the height of the #wrapper is greater than the body’s one ( 1024 px as it were agreed) than the overflow should be applied to the body . That is visible which is the default. Then overflow: visible is applied to the html . Then browser shows scroll for the entire window . Honestly, I don’t know whether this is specified by the W3C spec, but can suppose it is.

So when you scroll the window your html and body are moved as are all the other elements. This is the same behavior as is with any other elements (like in jsfiddle I posted above):

Note that the background is set on the body element, but it extends to the entire canvas i.e. far beyond of the body element itself. This is towards your concern of the possible necessity of setting bg-property on the body. This is 100% compliant with the W3C spec which states (cutted):

For documents whose root element is an . «html» element that has computed values of ‘transparent’ for ‘background-color’ and ‘none’ for ‘background-image’, user agents must instead use the computed value of the background properties from that element’s first . «body» element child when painting backgrounds for the canvas, and must not paint a background for that child element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.

When you zoom out your page then browser recalculates all dimensions. Let’s say, with each Ctrl + — click page shrinks, for example, for 20 %. Then all your text is reduced, cause its height depends on the font-size, which is affected by the Ctrl + — click, correspondingly

, #container and #wrapper all are reduced cause their height depends on text ‘s height. But body and html both have height which depends on the window ‘s height which is not affected by the Ctrl + — click. That is why you finally get this:

There is no difference here between width and height behavior in that case. You don’t see the same issue with horizontal dimension simply because you’ve set width: 960px; for the #container which turned out to be less than your browser window’s width, so no overflowing occurs. If the width of the #container were exceeding body’s width you would see this:

This all is a normal and expected behavior and there is nothing to solve here.

Источник

CSS wrapper how to set default height?

I made a website but I want to improve the layout. I wrapped all the div elements from the website inside

. I want to keep the height of div wrapper 95% by default. The problem is that if I add text to div element which is below, it will exit outside div. How to keep «div wrapper» at stable height even if other div below is empty? and later when I add text it should extend automatically so I could scroll it in the browser. Look at the picture.

 body < background-color: black; >.wrapper < background-color: blue; width: 90%; margin: 0 auto; >.menu < /* background-color: red;*/ width: 800px; height: 100px; >.maintext 

 
This is my little menu 
 
You can write here what you want 
Ok I will start now Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam rem officia dolor dicta. Voluptatum, sunt! Atque animi cupiditate quasi. Modi accusamus consequuntur esse quis suscipit, velit obcaecati cumque reprehenderit perferendis. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque odio tenetur, rem dolorum nesciunt voluptas quia ex alias corrupti, ullam consequatur distinctio cupiditate voluptate praesentium. Rem perspiciatis totam cumque officia. nde amet saepe optio obcaecati blanditiis sed sequi nostrum quaerat voluptatibus, est libero culpa nemo! Quaerat, eaque.