Я создаю веб-сайт, в котором основной фрейм контента должен охватывать всю ширину страницы и столько высоты, сколько необходимо, с минимальной высотой (для того, чтобы содержать плавающую «боковую панель»). Однако установка ширины элемента div на 100% не заполняет окно, оно переполняет его, создавая горизонтальную полосу прокрутки. Есть ли способ, чтобы div содержимого растягивался на всю ширину страницы и не более, без обрезки по бокам или снизу, как с настройками размера поля или переполнения?
Спасибо за ваше время,
Тимоти С.
base.css
html, body {
margin:0;
padding:0;
font-family: "Lucida Grande", Verdana;
font-size: 0.9em;
background-color:#4D714D;
background-image:url("images/titlebar.png");
background-attachment:fixed;
background-repeat:no-repeat;
background-position:0px 7px;
}
div.content
{
position:relative;
top: 150px;
padding: 20px;
margin-left: auto;
margin-right: auto;
width:100%;
min-height:500px;
background-color:#8BB88B;
}
div.sidebar
{
float:right;
position:relative;
top:-20px;
left:20px;
width: 400px;
height: 400px;
background-color:#FFFFFF;
}
пример страницы
<html>
<head>
<title>Login</title>
<link type="text/css" href="base.css" rel="stylesheet" />
</head>
<body>
<div class="content">
<div class="sidebar"></div>
<form action="loginScript.php" method="post">
<label>Username:</label>
<input type="text" name="username" /> <br />
<label>Password:</label>
<input type="password" name="password" /> <br />
<input type="submit" value="Login" name="login" />
</form>
<?php print($_GET['msg']) ?>
</div>
</body>
</html>