Question

老实说，我对CSS布局不太满意。我的问题是使左侧边栏与右侧上下文部分具有相同的高度。我的网络代码结构：

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="WebTest.Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<link href="Styles/StyleSheet1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div id="wrap">
    <div id="header">
        <h1>
            TEST</h1>
    </div>
    <div id="nav">
        <asp:Button ID="Lookup" runat="server" Text="Lookup" CssClass="nav_buttons" ClientIDMode="Static"/>

    </div>
    <div id="sidebar">
        <asp:Button ID="Button1" runat="server" Text="Button1" ClientIDMode="Static" CssClass="sidebar_buttons"
            OnClick="Button1_Click" />
        <asp:Button ID="Button2" runat="server" Text="Button2" CssClass="sidebar_buttons" />
    </div>

        <div id="gridview">

        </div>
        <div id="btnSave">
            <asp:Button ID="Edit" runat="server"   Text="Edit" OnClientClick="javascript:Edit_Click();return false;"  CssClass="btnEdit"/>
            <asp:Button ID="Cancel" runat="server" Text="Cancel" CssClass="btnEdit" OnClientClick="javascript:Cancel_Click();return false;" />
        </div>

    <script>
        $(document).ready(function () {
            var divwrap = $("#wrap").height();
            var divgridview = $("#gridview").height();
            var divheader = $("#header").height();
            var divnav = $("#nav").height();
            var divbtn = $("#btnSave").height();
            $("#sidebar").height(divbtn);

        });

        $('.sidebar_buttons').click(function (event) {
            $("#<%=Edit.ClientID %>").show();
            $("#<%=Cancel.ClientID %>").show();
        }); 
    </script>
</div>

网页快照： Test page 侧边栏比右侧略高。不确定应该在jquery中使用哪个变量。当我调试代码时，我发现divbtn是一个很大的数字，为什么？ CSS：

#wrap
{
width: 800px;
background-color: #99c;
}
#header
{
border-style: solid;
border-width: 1px;
background-color: #ddd;
width: 800px;
padding-top: 30px;
padding-bottom: 30px;
}
#nav
{
background-color: #c99;
padding-top: 30px;
padding-bottom: 30px;
width: 800px;
border-style: solid;
border-width: 1px;
}
#sidebar
{
float: left;
width: 125px;
padding-top: 10px;
background-color: #C0C0C0;
}
#gridview
{
float: right;
overflow: scroll;
width: 675px;
}



.sidebar_buttons
{
 margin-top: 10px;
 margin-left: 2px;
 width: 120px;
}

h1
{
margin-left: 50px;
}
.nav_buttons
{
 margin-left: 50px;
 width: 120px;
}


.btnEdit
{
 width: 60px;
 margin-left: 75px;
 margin-top: 50px;
 }

#btnSave
{
margin-left: 30px;
}

感谢您的帮助。

Answer 1

它们的高度相同。唯一的区别是，侧边栏顶部有窄边框，内容部分顶部有较粗边框。

我会试试这个解决方案。使侧边栏（带有按钮1和按钮2的部分）的边框变粗或使右边的顶部边框变窄。

// this is one solution
#sidebar{
    border-top-width:2px; <-- set 2px to what ever is right
}

// this is another
#gridview{
    border-top-width:2px; <-- set 2px to what ever is right
}

Answer 2

我使用的是水平列表，而不是2个div作为列，但那只是我。

CSS / Jquery布局：使两列高度相同

2 个答案: