Можно ли это сделать без таблиц или JavaScript: 100% высоты будет соответствовать оставшейся высоте контейнера - PullRequest
Новая
       7

Можно ли это сделать без таблиц или JavaScript: 100% высоты будет соответствовать оставшейся высоте контейнера

0 голосов
/ 28 апреля 2009

Можно ли создать макет без таблицы, который позволит элементу #bottom заполнить 100% оставшегося пространства, оставшегося в родительском элементе, без использования JavaScript?

Вот что работает при использовании таблиц: 

<html>
    <head>
        <style>
            table{
                height: 100%;
                width: 100%;
            }

            #top{
                background-color: blue;
                height: 200px;
            }

            #bottom{
                background-color: red;
                height: 100%;
            }        
        </style>
    </head>
    <body>
        <table>
            <tbody>
                <tr id="top">
                    <td></td>
                </tr>
                <tr id="bottom">
                    <td></td>
                </tr>            
            </tbody>            
        </table>
    </body>
</html>

1 Ответ

1 голос
/ 28 апреля 2009 
<html>
  <head>
    <style>
    * { padding: 0px; margin: 0px; }
    body {
      height: 100%;
    }
    #main {
      height: 100%;
      width: 100%;
      position: relative;
    }
    #top{
      background-color: blue;
      height: 200px;
    }
    #bottom{
      background-color: red;
      position: absolute;
      bottom: 0px;
      top: 200px;
      left: 0px;
      right: 0px;
    }               
    </style>
  </head>
  <body>
    <div id="main">
      <div id="top">
      </div>
      <div id="bottom">
      </div>
    </div>
    </body>
</html>

Тебе на самом деле не нужен #main, я просто хочу хранить свои вещи без необходимости.

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

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

...