【发布时间】：2015-03-30 22:24:35
【问题描述】：
我正在开发浏览器应用程序。我已经阅读了关于 DIV 标签的几十页。我只是无法让它工作。我知道我应该使用 CSS，但我会在完成其他一些事情后将其合并到最后。
基本上我想要页眉和页脚。然后是一个固定宽度的侧边栏，其余的要填充一个内容区域。我几乎明白了，但侧边栏开始太低（它应该与内容的高度相同）并且内容没有扩展以适应浏览器的宽度。
这是我得到的：
<header style='background-color:#013499; height:60'>
<br>
<span style='color:white'>    Whole Number</span>
<select>
<option value=""></option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</header>
<div>
<div style='display:inline-block; background-color:#7690C5; width:200'>
Task1
<br>Task2
<br>
</div>
<div style='display:inline-block; background-color:#F2F2F2'>
Top
<br>Content
<br>Bottom
</div>
</div>
<footer style='background-color:#013499; height:60'>
<br>
<form name="Actions" action="test.html" method="post">
   
<input type="submit" name="send_button" value="Save">   
<input type="submit" name="send_button" value="Cancel">
</form>
</footer>我找到了this post，这对我很有帮助。但这仍然不对。我似乎找不到任何解释这些东西如何协同工作的文档。
我不知道如何让内容填满剩余空间。它最终太短（根据实际内容调整大小）或超出屏幕大小，因为它 100% 包含侧边栏的宽度。我知道出了什么问题，但我不知道如何改正。
我现在将样式从 HTML 中移出。
html, body {
height: 100%;
margin: 0;
}
header {
width: 100%;
height: 60px;
background-color: #013499;
margin: 0;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 0 -60px 0; /* the bottom margin is the negative value of the footer's height */
position: relative;
}
#sidebar {
background-color: #7690C5;
width: 300px;
height: auto !important;
bottom: 60px;
top: 60px;
display: inline-block;
position: absolute;
}
#content {
background-color: #F2F2F2;
width: 100%;
height: auto !important;
bottom: 60px;
top: 60px;
margin-left: 300px;
display: inline-block;
position: absolute;
}
footer {
margin: -60px 0 0 0;
width: 100%;
height: 60px;
background-color: #013499;
}
#buttons {
margin-right: 20px;
text-align: right;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Viewer test</title>
<link rel=Stylesheet Type='text/css' href=ERP.css>
</head>
<body>
<div id="wrapper">
<header>
<br>
<span style='color:white'>    Whole Number</span>
<select>
<option value=""></option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</header>
<div id="sidebar">
Task1<br>
Task2<br>
</div>
<div id="content">
Content
</div>
</div>
<footer>
<br>
<form id='buttons' name="Actions" action="test.html" method="post">
<input type="submit" name="send_button" value="Save">   
<input type="submit" name="send_button" value="Cancel">
</form>
</footer>
</body>
</html>【问题讨论】：
标签： html