Блок на оставшуюся ширину/ высоту страницы

@[FENIX] · Регистрация: 09.10.2009

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

Всем привет. Хочу сверстать несколько блоков на странице. Шапка, с фиксированной высотой, шириной 100%.

Затем 2 блока. Левый блок с шириной 200px, правый блок, который бы занимал всю оставшуюся часть страницы.

Footer фиксированной высотой, шириной 100%.

Пример во вложении, или по ссылке: [del]

Проблема вот в чём. Как сделать правый блок (3 на макете) размером на всю оставшуюся часть страницы.

И как вообще сделать блоки 2 и 3 высотой на всю оставшуюся часть страницы таким образом, чтобы скролл появлялся только в блоках 2 и 3 если контента в них очень много и этот контент вылазит за пределы блоков?

Вот что смог пока сделать: https://jsfiddle.net/fenix_63/duy2cyuz/

HTML5

<body>
    <header>
        Шапка
    </header>
    <div class="container">
 
        <div class="users">
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
        </div>
        <div class="messages">
            Блок, заполняющий оставшееся пространство
        </div>
 
    </div>
    
 
    
    <footer>
        footer
    </footer>
    
    
</body>

CSS

body{
    margin:0;
    padding:0;
    overflow-x: hidden;
    overflow-y: auto;
    height:100%;
}
*{
    border: 0px solid #000;
}
 
body{
    width:100%;
    height: 100%;
}
 
 
header, .users,.messages,footer{
    border: 1px solid #000;   
}
 
 
.container{
    width:100%;
    height: 100%;
    display: table;
    margin-top: 50px;
 
    
}
 
.users,.messages{
    display: table-cell;
    float:left;
    position: relative;
 
}
 
.users{
    width:200px;
}
 
 
 
header{
    position: absolute;
    top:0;
    height: 50px;
    width:100%;
    background-color: lime;
 
}
 
 
 
footer{
    background-color: lightblue;
    width:100%;
    
    height: 100px;
    bottom:0;
    position: absolute;
    z-index:1;
}

Народ, помогите пожалуйста кто знает.

@[FENIX] · 13.04.2017, 11:50 **[ТС]**

С шириной разобрался, а вот как сделать высоту 2 и 3 блока так, чтобы она была равная высоте страницы - высота шапки - высота подвала? И чтоб если блоки 2 и 3 из-за обилия контента не вмещаются в эту область, чтоб скролл появлялся?

https://jsfiddle.net/duy2cyuz/3/

HTML5

<body>
    <header>
        Шапка
    </header>
    <div class="container">
 
        <div class="users">
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
        </div>
        <div class="messages">
            Блок, заполняющий оставшееся пространство
        </div>
 
    </div>
    
 
    
    <footer>
        footer
    </footer>
    
    
</body>

CSS

body{
    margin:0;
    padding:0;
    overflow-x: hidden;
    overflow-y: auto;
    height:100%;
}
*{
    border: 0px solid #000;
}
 
body{
    width:100%;
    height: 100%;
}
 
 
header, .users,.messages,footer{
    border: 1px solid #000;   
}
 
 
.container{
    width:100%;
    height: 100%;
    display: table;
    margin-top: 50px;
 
    
}
 
.users,.messages{
    display: table-cell;
    position: relative;
 
}
 
.users{
    width:200px;
}
 
 
 
header{
    position: absolute;
    top:0;
    height: 50px;
    width:100%;
    background-color: lime;
 
}
 
 
 
footer{
    background-color: lightblue;
    width:100%;
    
    height: 100px;
    bottom:0;
    position: absolute;
    z-index:1;
}

	13.04.2017, 11:50