[英]Make two column same height
我正試圖使兩根柱子的高度相同,但失敗了。 如何更改我的CSS或使用Jquery? 請不要桌子。 我有一個gridview來顯示數據庫中的表。
我的代碼:
<div id="wrap">
<div id="header">
<h1>TEST</h1>
</div>
<div id="sidebar">
<ul>
<li>nav1</li>
<li>nav2</li>
<li>nav3</li>
<li>nav4</li>
</ul>
</div>
<div id="gridview">
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
</div>
</div>
CSS:
#wrap
{
width: 800px;
background-color: #99c;
overflow: hidden;
}
#header
{
border-style: solid;
border-width: 1px;
background-color: #ddd;
width: 800px;
padding-top: 30px;
padding-bottom: 30px;
}
#sidebar
{
float: left;
width: 125px;
padding-top: 10px;
background-color: #C0C0C0;
}
#gridview
{
float: right;
width: 675px;
}
我嘗試過人造柱,但沒有運氣。
問題1:如何修改CSS或使用jquery?
問題2:表格寬度很難適應#wrap的寬度(此處為800px)。 有什么花招嗎? 感謝代碼幫助。
我喜歡用jQuery
jQuery(document).ready(function() {
var divone = jQuery("#sidebar").height();
var divtwo = jQuery("#gridview").height();
var maxdiv = Math.max(divone, divtwo);
jQuery("#sidebar").height(maxdiv);
jQuery("#gridview").height(maxdiv);
});
這基本上取兩個div的高度並獲得最大高度,然后為兩個div分配相同的高度。 這非常適合擴展div
也嘗試一下:
function sameHeight(el1,el2) {
var he1 = $(el1).height();
var he2 = $(el2).height();
if(he1 > he2){ $(el2).height(he1); };
if(he1 < he2){ $(el1).height(he2); };
};
sameHeight(yourhtmlelement1,yourhtmlelement2);
您可以使用各種html元素!
您需要的是一個明確的解決方案:
<div id="sidebar">
<ul>
<li>nav1</li>
<li>nav2</li>
<li>nav3</li>
<li>nav4</li>
</ul>
</div>
<div id="gridview">
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
</div>
<span class="clear!></span>
在此位置上將此跨度添加(在兩個浮動div下)
並使用以下CSS:
.clear
{
display: block;
clear: both;
}
兩列現在應具有相同的高度。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.