0

正直、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>

Web ページのスナップショット: テストページ サイドバーは右より少し上にあります。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;
}

手伝ってくれてありがとう。

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 に答える