Размер и позиционирование блоков

@WEB_Beginner · Регистрация: 07.12.2014

Author24 — интернет-сервис помощи студентам

Здравствуйте.

HTML5

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>TEST</title>
        
        <style>
           #header {background:orange;
                    height:100px;
                    margin-bottom: 3px;}
 
           #navigate {background:cyan;
                      height:30px;
                      margin-bottom: 3px;}
 
           #menu {background:#ccc;
                  width:190px;
                  float:left;}
           
           #content {background:white;}
 
           #footer {background:orange;
                    height:30px;
                    clear:both;
                    margin-top: 3px;}
           
        </style>
    </head>
    
    <body>
        <div id="header">
            <p>Заголовок</p>
        </div>
        
        <div id="navigate">
            <a href="#">Ссылка 1</a>
            <a href="#">Ссылка 2</a>
            <a href="#">Ссылка 3</a>
        </div>
        
        <div id="menu">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
        
        <div id="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam quibusdam dolores repellendus modi reprehenderit eligendi perspiciatis odio ullam? Natus laboriosam ullam illum quidem officiis doloribus repudiandae error amet repellat numquam.</p>
            
        </div>
        
        <div id="footer">
            <p>Copyright</p>
        </div>
    </body>
</html>

Блоки header, navigate и footer имеют фиксированную высоту. Блоки menu и content должны занимать, как минимум, оставшееся пространство. Т.е. если данных в menu и/или content мало, то должно быть как на рисунке. Как это сделать?

@Khrist · 16.12.2014, 20:47

попробуйте сделать так:

HTML5

<style>
           html, body{
                     height:85%;
                       }
           #header {background:orange;
                    height:100px;
                    margin-bottom: 3px;}
 
           #navigate {background:cyan;
                      height:30px;
                      margin-bottom: 3px;}
 
           #menu {background:#ccc;
                  width:190px;
                  float:left;
                  min-height:100%;}
           
           #content {background:white;
                     min-height:100%;}
 
           #footer {background:orange;
                    height:30px;
                    clear:both;
                    margin-top: 3px;}
           
        </style>

кажется, должно помочь

можете еще "поразвлекаться" с процентами, если Вам нужно что-то, что отличается от этого решения

	16.12.2014, 20:47