Работя по уеб приложение, в което искам съдържанието да запълва височината на целия екран.
Страницата има заглавие, което съдържа лого и информация за сметката. Тя може да бъде с произволна височина. Искам дивът със съдържанието да запълва останалата част от страницата до дъното.
Имам header div
и content div
. В момента използвам таблица за оформлението по следния начин:
CSS и HTML
#page {
height: 100%; width: 100%
}
#tdcontent {
height: 100%;
}
#content {
overflow: auto; /* or overflow: hidden; */
}
<table id="page">
<tr>
<td id="tdheader">
<div id="header">...</div>
</td>
</tr>
<tr>
<td id="tdcontent">
<div id="content">...</div>
</td>
</tr>
</table>
Цялата височина на страницата е запълнена и не е необходимо превъртане.
За всичко, което е вътре в дива със съдържание, задаването на top: 0;
ще го постави точно под заглавието. Понякога съдържанието ще бъде истинска таблица, чиято височина е зададена на 100%. Поставянето на header
вътре в content
няма да позволи това да работи.
Има ли начин да се постигне същият ефект, без да се използва table
?
Актуализация:
Елементите вътре в съдържанието div
също ще имат височини, зададени в проценти. Така че нещо с височина 100% вътре в div
ще го запълни до дъното. Както и два елемента на 50%.
Актуализация 2:
Например, ако заглавието заема 20% от височината на екрана, таблица, зададена на 50% вътре в #content
, ще заеме 40% от пространството на екрана. Засега единственото работещо нещо е да се обгърне цялото нещо в таблица.
Наистина не съществува надежден начин за това в CSS, който да се използва в различни браузъри. Ако приемете, че оформлението ви е сложно, трябва да използвате JavaScript, за да зададете височината на елемента. Същността на това, което трябва да направите, е:
Element Height = Viewport height - element.offset.top - desired bottom margin
След като можете да получите тази стойност и да зададете височината на елемента, трябва да прикрепите обработчици на събития към onload и onresize на прозореца, за да можете да задействате функцията си за промяна на размера.
Също така, ако приемем, че съдържанието ви може да е по-голямо от viewport, ще трябва да зададете overflow-y за превъртане.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
height: 100%;
margin: 0;
padding: 0;
color: #FFF;
}
#header
{
float: left;
width: 100%;
background: red;
}
#content
{
height: 100%;
overflow: auto;
background: blue;
}
</style>
</head>
<body>
<div id="content">
<div id="header">
Header
<p>Header stuff</p>
</div>
Content
<p>Content stuff</p>
</div>
</body>
</html>
Във всички разумни браузъри можете да поставите "header" div преди съдържанието, като брат или сестра, и същият CSS ще работи. Въпреки това, IE7- не интерпретира правилно височината, ако float е 100% в този случай, така че заглавието трябва да бъде В съдържанието, както по-горе. Overflow: auto ще доведе до двойни ленти за превъртане в IE (при който лентата за превъртане на изгледа винаги е видима, но е изключена), но без нея съдържанието ще се изреже, ако се препълни.
Ако единственият проблем е височината, изглежда, че използването на дивиди работи:
<div id="header">header content</div>
<div id="content" style="height:100%">content content</div>
При един прост тест ширината на заглавието/съдържанието е различна в твоя и моя пример, но от поста ти не съм сигурен дали се притесняваш за ширината?