Как динамически изменять размер области содержимого с помощью CSS и без JavaScript - PullRequest
Новая
       0

Как динамически изменять размер области содержимого с помощью CSS и без JavaScript

3 голосов
/ 19 февраля 2011

Я хочу вот что:

  • при изменении размера окна браузера синяя область изменяется.
  • Заголовок виден.
  • синяя область начинается там, гдезаголовок заканчивается (не за заголовком или выше).
  • синяя область заканчивается перед нижним колонтитулом.
  • между синей областью и нижним колонтитулом существует 5 желтых пикселей.

Это возможно только с CSS и HTML (без JavaScript)? 

<!doctype html>
<html lang="en-US">
<head>
    <meta charset="utf-8"/>
    <title>Test</title>

    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
    <style>

    *{
        margin:0px;
        padding:0px;
    }

    header, nav, article, footer, address {  
        display: block;  
    }

    header{
        position:relative; height: 50px; background-color:#2b2b2b;
    }

    footer{
        height: 50px; 
        width:100%; 
        bottom: 0px; 
        position: fixed; 
        background: red;
    }

    #explorer{
        position:relative; bottom:55px; 
    }

    #sections{
        width: 100%; height: 100%; bottom: 55px; position:fixed; background: blue;
    }

    </style>
</head>

<body style="background-color:yellow">
    <header >
        <h1>Test</h1>
    </header>
  <div id="explorer" >
      <div id="sections" >
   &nbsp;
      </div>
  </div>
  <footer>
       /* Footer Content */
  </footer>
</body>

</html>

Ответы [ 3 ]

5 голосов
/ 19 февраля 2011

Я думаю, что код Kit нуждается только в одной настройке, то есть мы должны удалить высоту: 100% из разделов div, и все будет работать нормально.Кроме того, во время тестирования следующего кода я заметил, что если мы уменьшаем высоту выше предела, нижний колонтитул фактически оказывается выше заголовка.Хотя практически высота никогда не будет такой меньшей, но все же вы можете добавить z-index: 5000 к тегу заголовка

4 голосов
/ 19 февраля 2011

Как это? 

<html>
<head>
    <meta charset="utf-8"/>
    <title>Test</title>
    <style type="text/css">

    html, body, h1 {
        margin:0px;
        padding:0px;
    }

    header, nav, article, section, footer, address {  
        display: block;  
    }

    header {
        position:relative;
        height: 50px;
        width: 100%;
        background-color:#2b2b2b;
    }

    footer{
        height: 50px; 
        width:100%; 
        bottom: 0px; 
        position: fixed; 
        background: red;
        border-top: 5px solid yellow;
    }

    #explorer{
        position:relative; bottom:55px; 
    }

    #sections{
        width: 100%;
        height: 100%;
        bottom: 55px;
        position:fixed;
        top: 50px;
        background: rgba(0,0,256,.5);
    }

    </style>
</head>
<body>
    <header >
        <h1>Test</h1>
    </header>
    <div id="explorer" >
        <div id="sections" >
        &nbsp;
        </div>
    </div>
    <footer>
        /* Footer Content */
    </footer>
</body>

0 голосов
/ 19 февраля 2011

Я только что ответил на аналогичный вопрос на Как расширить div, чтобы покрыть оставшуюся высоту страницы

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

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

...