heigh 100% и margin-top

September 10, 2008

Возникла следующая проблема: хочу сделать поле, занимающие всю высоту экрана и при этом имеющие фиксированный в пикселях отступ сверху. Если я указываю height: 100% и margin-top: 200px, то мое поле вылезает за размеры экрана, создавая не применимый скроллинг. Как добиться, чтобы высота поля была 100% - 200px и лишний скроллинг не возникал?

В этом примере я попытался изобразить концепцию, однако два элемента здесь налезают друг на друга.

<!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>Untitled Page</title>
    <style type="text/css">
    html
    {
	    height: 100%;
    }
    body
    {
	    margin: 0;
	    padding: 0;
	    height: 100%;
	    min-height: 100%;
	    background: #fff;
	    color: inherit;
    }  
    .header
    {
    	background-color:Blue;
    	height: 200px;
    	position:absolute;
    	width: 100%;
    }
    .categories
    {
    	background-color: Red;
    	overflow:auto;
    	height:100%;
    	margin-top: 200px;
    }
    </style>
</head>
<body>

<div class="header">
Header
</div -->


<div class="categories">
Совсем немножко текста<br />Совсем немножко текста<br />Совсем немножко текста<br />Совсем немножко текста<br />
Совсем немножко текста<br />Совсем немножко текста<br />Совсем немножко текста<br />Совсем немножко текста<br />
Совсем немножко текста<br />Совсем немножко текста<br />Совсем немножко текста<br />Совсем немножко текста<br />
Совсем немножко текста<br />Совсем немножко текста<br />Совсем немножко текста<br />Совсем немножко текста<br />
Совсем немножко текста<br />Совсем немножко текста<br />Совсем немножко текста<br />Совсем немножко текста<br />
Совсем немножко текста<br />Совсем немножко текста<br />Совсем немножко текста<br />Совсем немножко текста<br />
Совсем немножко текста<br />Совсем немножко текста<br />Совсем немножко текста<br />Совсем немножко текста<br />
Совсем немножко текста<br />Совсем немножко текста<br />Совсем немножко текста<br />Совсем немножко текста<br />
Совсем немножко текста<br />Совсем немножко текста<br />Совсем немножко текста<br />Совсем немножко текста<br />
Совсем немножко текста<br />Совсем немножко текста<br />Совсем немножко текста<br />Совсем немножко текста<br />
Совсем немножко текста<br />Совсем немножко текста<br />Совсем немножко текста<br />Совсем немножко текста<br />
Совсем немножко текста<br />Совсем немножко текста<br />Совсем немножко текста<br />Совсем немножко текста<br />
Совсем немножко текста<br />Совсем немножко текста<br />Совсем немножко текста<br />Совсем немножко текста<br />
Совсем немножко текста<br />Совсем немножко текста<br />Совсем немножко текста<br />Совсем немножко текста<br />
Совсем немножко текста<br />Совсем немножко текста<br />Совсем немножко текста<br />Совсем немножко текста<br />
</div>

</body>
</html>

klierik · September 10, 2008

body {overflow: hidden;}

September 10, 2008

body {overflow: hidden;}

Но тогда будет скрываться часть содержания. Это для меня неприемлемо.

September 10, 2008

я имел ввиду: чтобы высота была 100% минус 200px

Ogalig · September 11, 2008

У меня похожая проблема была. Мне дали несколько советов. Может тебе подойдут, посмотри: http://forum.htmlbook.ru/index.php?showtopic=10172

September 11, 2008

У меня похожая проблема была. Мне дали несколько советов. Может тебе подойдут, посмотри: http://forum.htmlbook.ru/index.php?showtopic=10172

К сожалению ни один из советов не подходит, т.к. мое резиновое поле должно также иметь свойство overflow:auto

:rolleyes:

первый предложенный вариант раздвигается

на втором второй сролинг резинового поля будет скрываться шапкой

musulman · September 11, 2008

затерто..

не так понял.

Edited September 11, 2008 by musulman

Ogalig · September 12, 2008

Вот мое решение, правда оно только для ие, но для других браузеров тоже есть возможность вставки кода в ксс. Ну или придется хаки искать.

height: expression(document.body.offsetHeight - this.previousSibling.offsetHeight + "px");

Sign In

heigh 100% и margin-top

Question

Guest Гость_Олег_*

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

Guest Гость_Олег_*

Link to comment

Share on other sites

Guest Гость_Олег_*

Link to comment

Share on other sites

Ogalig

Link to comment

Share on other sites

Guest Гость_Олег_*

Link to comment

Share on other sites

musulman

Link to comment

Share on other sites

Ogalig

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information