| |
 13.1 Кб |
|
| | Добрый день.
Мне нужно сверстать следующий сайт исключительно DIV'ами. Во внешний DIV погружены три DIV'a. Первый DIV Шапка тянется по ширине страницы и имеет фиксированный размер. Под ним расположены DIV'ы Меню и Информация, высота которых должна изменяться в зависимости от размера окна браузера.
Был написан код:
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="NewFile.css"/>
</head>
<body>
<div id='main-content'>
<div id='header'>
<h1>Шапка</h1>
</div>
<div id='menu'>
<h1>Меню</h1>
</div>
<div id='info'>
<h1>Информация</h1>
</div>
</div>
</body>
</html>
|
CSS
html,body {
margin : 0;
padding : 0;
height : 100%;
}
#main-content {
border : 5px ridge #8b7e96;
position : fixed;
height : 98%;
width : 99%;
margin : 2px;
}
#header {
margin : 2px;
padding : 2px;
height : 100px;
background : #FFEF97;
border : 5px ridge #8b7e96;
}
#menu {
margin-left : 2px;
width : 300px;
height : 85%;
border : 5px ridge #8b7e96;
float : left;
background : #FFC597;
}
#info {
margin : 2px 2px 2px 317px;
border : 5px ridge #8b7e96;
padding : 2px;
height : 84%;
}
|
Подскажите, пожалуйста, как решить следующие задачи:
1. Растянуть внутренние DIV'ы с Меню и Информацией по всей высоте внешнего DIV'a и при этом внутренние DIV'ы имели бы один размер по высоте.
2. Сделать так, чтобы при уменьшении размеров окна браузера внутренние DIV'ы Меню и Информация не выходили за границы внешнего DIV'a. | |
| |
|
