html定位的問題 - 旁邊，頁腳，填充
[英]Problems with html positioning - aside, footer, padding
問題描述
我迷失在這一點上。 經過無數個小時的搜索和嘗試，我還沒有找到一個有效的解決方案。
我在同時實現以下三點時遇到問題：
- 底部有一些填充物。 （當內容變長時，最終底部沒有空白區域。）
- 左右兩側與最長內容一起展開
- 當旁邊比主要內容短時，分隔線應該仍然是從上到下。
一些說明：
目前，第三點正在發揮作用。
當將位置改為相對位置時，頁面會按原樣擴展。 雖然第三點不再適用。
尚未找到第一個解決方案。
這是我的布局的縮小版本。 由於所有問題仍然存在於少量代碼中，因此這可能就足夠了：
的index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<header>
<nav>
<!--My nav here-->
</nav>
</header>
<div id="content_wrapper">
<aside>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere sodales ante id facilisis. Vestibulum euismod mattis nisl, id consequat tortor suscipit vitae. Maecenas sit amet dolor nibh. Quisque vitae commodo augue. Nullam bibendum posuere est, non gravida ante lacinia quis. Vestibulum imperdiet orci eu nisl posuere a gravida orci ullamcorper. Nullam quis lacus ipsum.
</p>
</aside>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere sodales ante id facilisis. Vestibulum euismod mattis nisl, id consequat tortor suscipit vitae. Maecenas sit amet dolor nibh. Quisque vitae commodo augue. Nullam bibendum posuere est, non gravida ante lacinia quis. Vestibulum imperdiet orci eu nisl posuere a gravida orci ullamcorper. Nullam quis lacus ipsum.
</p>
</div>
</div>
</div>
</body>
</html>
style.css文件
* {
margin: 0;
padding: 0;
}
body {
background-color: #ebebeb;
}
#wrapper {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#content_wrapper {
position: absolute;
width: 1000px;
top: 90px;
background-color: #fff;
}
#content_wrapper aside {
position: relative;
float: left;
width: 200px;
padding: 10px;
top: 0px;
bottom: 0px;
box-shadow: inset -8px 0 10px -6px #ddd;
}
#content {
float: right;
width: 760px;
padding: 10px;
}
我很確定這需要從頭開始重新構建。
但在我成功地做到這一點之前，我想了解我的問題的原因，這可能很容易解決嗎？
或者換句話說，實現這種布局的最佳/工作方式是什么，以便一切都能正確擴展，以便底部仍然可以填充？
很感謝任何形式的幫助。
2 個解決方案
解決方案1
8 已采納 2013-02-26 17:35:05
這實際上與我的問題非常相似，雖然我沒有意識到：
將列內容與其背景顏色分開
解決等高問題的第一步是將其分解成可以單獨求解的較小塊。 我們這樣做的方法是為每列使用兩個div而不是一列。 第一個div用於保存內容，另一個用作背景顏色。 這種分離使我們能夠單獨控制這些元素，並且我們可以以更有用的方式將它們組合在一起。 這很快就會變得清晰。
浮動的容器div將始終是浮動內容的高度
這是這種等柱高法的核心原則。 使div的高度等於最高列的唯一方法是該div是否包含所有列。 因此，為了解釋另一種方法，通過將列放在容器內，我們使容器成為最高列的高度。 這是一個非常有用的結構。
三列HTML div結構
在上面的示例中，三個內容列位於容器div中。
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
三欄CSS
這里是強制容器div到最長列高度的CSS。
#container1 {
float:left;
width:100%;
}
#col1 {
float:left;
width:30%;
background:red;
}
#col2 {
float:left;
width:40%;
background:yellow;
}
#col3 {
float:left;
width:30%;
background:green;
}
為了使這個結構在所有瀏覽器中正常工作，容器div必須浮動（左或右）加上每個列內容div也必須浮動，無論哪種方式都無關緊要。 浮動內容div的過程使它們在頁面上水平排列。 浮動容器使其延伸到內部最高柱的高度。 如果我們沒有浮動容器，那么內容div將從底部的容器中伸出，容器將沒有正確的高度。 實際上，在這個例子中，如果容器沒有浮動，容器的最高高度為零。
添加額外的嵌套容器
等高柱的下一步是添加額外的容器，使它們彼此嵌套。 我們需要與列相同數量的容器 - 三個。 這三個容器將成為每列的背景。 請注意，我們已從原始列中刪除了背景顏色，並將它們添加到容器中。
三列HTML div結構
這兩個額外的容器已添加到下面的HTML中。
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
</div>
</div>
三欄CSS
所有元素都浮動到左側，容器的寬度設置為100％，因此它們保持頁面的整個寬度。 背景顏色已從內容div中刪除並添加到容器中。
#container3 {
float:left;
width:100%;
background:green;
}
#container2 {
float:left;
width:100%;
background:yellow;
}
#container1 {
float:left;
width:100%;
background:red;
}
將容器移動到相對定位的位置
使用相對定位，我們現在將容器移動到新位置。 當移動每個容器時，div在下面可見。 它是彩色容器的分層和位置，可以創建相等高度列的背景。 container2 div向左移動30％以顯示綠色右側列，container1 div向左移動40％以顯示黃色中間列，同時仍然可見的紅色部分變為左欄。
CSS相對定位規則
這是添加的CSS線，顯示相對定位的添加。
#container2 {
position:relative;
right:30%;
}
#container1 {
position:relative;
right:40%;
}
將內容移回每列
接下來要做的是將每列的內容移回頁面，使其與下面的列背景顏色對齊。 這也是通過簡單的相對定位完成的。
最后，我們通過添加溢出來隱藏突出的容器：隱藏; 規則在最外面的容器 - container3。
這是我將在現在集成代碼的初始布局： JFiddle示例
在這個JFiddle示例中沒有解決的一件事是分隔符。 目前我認為將分隔符作為投影添加到內容而不是放在一邊。 哪個比另一個div更容易創建。
來源： 等高的列跨瀏覽器css沒有黑客
解決方案2
0 2013-02-26 17:01:04
你可以嘗試這樣做：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #ebebeb;
}
#wrapper {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#content_wrapper {
width: 1000px;
margin: 90px auto 90px;
background-color: #fff;
}
#content_wrapper aside {
display: table-cell;
width: 200px;
padding: 10px;
box-shadow: inset -8px 0 10px -6px #ddd;
}
#content {
display: table-cell;
width: 760px;
padding: 10px;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<nav>
<!--My nav here-->
</nav>
</header>
<div id="content_wrapper">
<aside>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere sodales ante id facilisis. Vestibulum euismod mattis nisl, id consequat tortor suscipit vitae. Maecenas sit amet dolor nibh. Quisque vitae commodo augue. Nullam bibendum posuere est, non gravida ante lacinia quis. Vestibulum imperdiet orci eu nisl posuere a gravida orci ullamcorper. Nullam quis lacus ipsum.
</p>
</aside>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere sodales ante id facilisis. Vestibulum euismod mattis nisl, id consequat tortor suscipit vitae. Maecenas sit amet dolor nibh. Quisque vitae commodo augue. Nullam bibendum posuere est, non gravida ante lacinia quis. Vestibulum imperdiet orci eu nisl posuere a gravida orci ullamcorper. Nullam quis lacus ipsum.
</p>
</div><!-- #content -->
</div>
</div>
</div>
</body>
</html>
刪除了#content_wrapper中的絕對定位並添加了邊距以確保底部始終有一些空格。 除此之外aside和#content被顯示成表格單元格-這可能不是在一些舊的瀏覽器（IE，即舊版本）的工作，所以它可能不適合你，取決於你要支持哪些瀏覽器。
HTML頁腳/ Div定位
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.