我有一個我正在處理的網頁,當中間沒有內容時它看起來很棒。當我試圖將內容添加到中心列時,最近出現了問題。我添加了一個表格,其中包含人們必須回答的一長串問題。問題是,當這個內容比窗口大小大時,它會向下滾動顯示內容,但側邊欄保持相同的大小。Div側邊欄不會隨中間列的內容擴展
我已將下面的代碼附加在jsfiddle上。任何幫助,將不勝感激。 :)
@charset"utf-8";
html, body {
width: 100%; /* IE6 Hacks */
height: 100%; /* IE6 Hacks */
margin: 0;
padding: 0;
}
body {
background-color: green;
background-repeat: repeat;
height: 100%;
}
#content_wrapper {
margin: 0 auto; /* Center it on the page */
width: 93%;
height: 100%;
}
#center_column {
margin: 0 14px 0 14px; /* 0 Right Column 0 Left Column */
background-color: #FFF;
height: 100%;
}
#left_column, #right_column {
width: 14px;
height: 100%;
}
#left_column {
float: left;
background-color: pink;
}
#right_column {
float: right;
background-color: orange;
}
#header_top {
width: 100%;
height: 14px;
background-color: #EEE;
}
#header_top_grad {
width: 100%;
height: 14px;
background-color: blue;
background-repeat: repeat-x;
}
#header_middle {
height: 40px;
width: 100%;
background-color: yellow;
background-repeat: repeat-x;
}
#header_bottom {
background-color: blue;
background-repeat: repeat-x;
height: 14px;
width: 100%;
}
#logo {
width: 100%;
background-color: #EEE;
}
#logo img {
width: 253px;
height: 47px;
margin: 10px 0 10px 20px;
}
#main_table {
color: #696969;
font-size: small;
width: 90%;
margin: 0 auto;
border-spacing: 0;
border: 0;
/* IE border-spacing workaround */
border-collapse: collapse;
}
#main_table td {
/* Padding between each question */
padding-bottom: 20px;
}
.q_column, .r_column, .e_column {
background-color: #FFF;
}
.q_column {
font-weight: bold;
text-align: right;
/* Padding between question and response column */
padding-right: 10px;
}
.red {
color: #F00;
font-size: large;
}
.text_field {
border: 1px solid;
border-collapse: collapse;
border-color: #BBB;
color: #000;
}
.small_text {
font-size: smaller;
}
.r_column {
width: 35%;
}
.e_column {
width: 25%;
}
我已經不成功地試圖clearfix但可能做錯了什麼,或者它甚至可能不是正確的解決方案。
邊欄? – krish 2013-03-09 11:52:14
當我談論側欄時,我的意思是左邊和右邊的欄。 @snowp這確實修復了中心列的調整,但它吹了左邊和右邊的列。 – user2151158 2013-03-09 20:13:43
仍然不清楚理解,但檢查這個小提琴http://jsfiddle.net/krish/qp5Zk/6/ – krish 2013-03-10 05:41:09