Установите свойство высоты DIV на странице, которая имеет нижний колонтитул - PullRequest
Новая
       4

Установите свойство высоты DIV на странице, которая имеет нижний колонтитул

2 голосов
/ 26 января 2010

По сути, я хочу иметь эту среднюю синюю прокрутку части тела без полосы прокрутки внизу. Я знаю, что могу сделать это с помощью JavaScript, я ищу больше решения CSS.

На моем реальном сайте у меня есть div, высотой около 150 пикселей, который содержит значки / изображения для выполнения каких-либо задач, а затем остальную часть контента также необходимо прокручивать по вертикали, я тоже хочу найти решение для этого. Я могу пересечь этот мост дальше, хотя.

Так есть ли способ заставить эту полосу прокрутки не «переполнить» нижние 30 пикселей? Я знаю, что могу смоделировать это с другим DIV там ( Как создать div, чтобы заполнить все пространство между верхним и нижним колонтитулами div ), но я собираюсь динамически добавлять / удалять элементы, так что на самом деле это не полезное решение для меня.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Testing Page</title>
<style  TYPE="text/css"> 
HTML
{
    height:100%;
    overflow:hidden;
}
BODY
{
    height:100%;
    margin:0;
    overflow:hidden;
}
DIV#content
{
    height:100%;
    margin-bottom:-30px;
    background-color:blue;
    overflow:auto;
}
</style>
</head>
<body>
    <div style="height:20px;background-color:green;width:100%;">top bar</div>
    <div id="content">
        main area
        <div style="height:2000px;width:500px;background-color:yellow;">cool kids<div>
    </div>
    <div style="position:absolute;bottom:0;left:0;background-color:brown;height:30px;width:100%;">bottom bar</div>
</body>
</html>

спасибо за вашу помощь.

Ответы [ 2 ]

3 голосов
/ 26 января 2010

Абсолютное позиционирование. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Testing Page</title>
<style  TYPE="text/css"> 
HTML
{
    height:100%;
    overflow:hidden;
}
BODY
{
    height:100%;
    margin:0;
    overflow:hidden;
}
DIV#content
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 30px;
    background-color:blue;
    overflow:auto;
}
</style>
</head>
<body>
    <div style="height:20px;background-color:green;width:100%;">top bar</div>
    <div id="content">
        main area
        <div style="height:2000px;width:500px;background-color:yellow;">cool kids</div>
    </div>
    <div style="position:absolute;bottom:0;left:0;background-color:brown;height:30px;width:100%;">bottom bar</div>
</body>
</html>
0 голосов
/ 26 января 2010

Используя немного JavaScript, я думаю, что мы можем решить вашу проблему. 

<html>
<head>
<title>Testing Page</title>
<style  TYPE="text/css"> 

BODY
{
    height:100%;
    margin:0;
    overflow:hidden;
}
DIV#header
{
    top: 0px;
    height: 20px;
    width: 100%;
    position: absolute;
    background-color: green;
}
DIV#content
{
    top: 20px;
    bottom:30px;
    width: 100%;
    background-color:blue;
    position: absolute;
    overflow:auto;
}
DIV#footer
{
    bottom: 0px;
    height: 30px;
    width: 100%;
    background-color: red;
    position:absolute;
}
</style>
<script type="text/JavaScript">
function adjustContent()
{
    document.getElementById("content").style.height = window.height-50;
}
</script>
</head>
<body onLoad="adjustContent()" >
    <div id="header">top bar</div>
    <div id="content">
        main area
        <div style="height:2000px;width:500px;background-color:yellow;">cool kids</div>
    </div>
    <div id="footer">bottom bar</div>
</body>
</html>

С событием body onLoad JavaScript изменяет размер области содержимого до правильной высоты. Полоса прокрутки не обгоняет ваш нижний колонтитул, а верхний и нижний колонтитулы остаются в верхней и нижней части страницы.

Кроме того, добавление содержимого динамически в div содержимого не должно нарушать этот макет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...