Question

我正在开发一款浏览器应用。我已经阅读了几十页关于 DIV 标签的内容。我无法让它发挥作用。我知道我应该使用CSS，但是在完成其他一些事情后，我会在最后加入CSS。

基本上我想要页眉和页脚。然后是一个固定宽度的侧杆，其余部分用一个内容区域填充。我几乎得到了它，但边栏开始太低（它应该与内容的高度相同）并且内容不会扩展以适应浏览器的宽度。

这是我所拥有的：

<header style='background-color:#013499; height:60'>

  <br>
  <span style='color:white'>&nbsp &nbsp 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">
    &nbsp &nbsp
    <input type="submit" name="send_button" value="Save">&nbsp &nbsp
    <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'>&nbsp &nbsp 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">&nbsp &nbsp
	    	<input type="submit" name="send_button" value="Cancel">
		</form>

    </footer>

</body>
</html>

Answer 1

首先，不要使用内联样式。任何触动你的代码的人都会讨厌你，当你想要对100个同时适用的元素进行修改时，你会同样讨厌自己。

另外，HTML是面包，CSS是黄油。他们自己就是垃圾，但他们在一起非常棒。

您的“侧边栏”不是全高的唯一原因是因为旁边元素的内容具有更多内容。您需要使用CSS来阻止这种情况发生。

Answer 2

请参阅fiddle

侧边栏有点失落的原因是因为你在风格中有inline-block。在我做的小提琴中，我用display:inline-block;取代float:left; }。请看小提琴

新标记如下

<header style='background-color:#013499; height:60px'>
    <br> <span style='color:white'>&nbsp &nbsp Whole Number</span>

    <select>
        <option value=""></option>
        <option value="1">One</option>
        <option value="2">Two</option>
    </select>
</header>
<div>
    <div style='float:left; background-color:#7690C5; width:200px;'>Task1
        <br>Task2
        <br>
    </div>
    <div style='float:left; background-color:#F2F2F2;'>Top
        <br>Content
        <br>Bottom</div>
</div>
<footer style='clear:both;background-color:#013499; height:60px'>
    <br>
    <form name="Actions" action="test.html" method="post">&nbsp &nbsp
        <input type="submit" name="send_button" value="Save">&nbsp &nbsp
        <input type="submit" name="send_button" value="Cancel">
    </form>
</footer>

Answer 3

尝试使用固定（或绝对）位置。试试这个，例如：

<header style="background-color:#013499; height:60; right: 0;left: 0;top: 0;position: fixed;">

<div style="display:inline-block; background-color:#F2F2F2;float: right;top: 60px;position: fixed;right: 0;"> 

<footer style="background-color:#013499; height: 62px;position: fixed;width: 100%;left: 0;bottom: 0;">

如何在HTML页面中扩展div

3 个答案:

请参阅fiddle