0

To be honest, I am not strong on CSS layout. My question is to make the left sidebar having the same height with the right context part. My web code structure:

<%@ 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>

The web page snapshot: Test page The sidebar is a little higher then the right. Not sure which variable should be used in jquery. When I debugged into the code, I found divbtn is a big number, why? 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;
}

Thanks for help.

4

2 回答 2

0

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

我会尝试这个解决方案。使侧边栏的边框（具有按钮 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
}
于 2012-04-09T21:08:19.283 回答
-1

我会使用一个水平列表，而不是 2 个 div 作为列，但这只是我。

于 2012-04-09T17:45:38.030 回答