HTMLはあまりしません。しかし、私はWinFormsのように正確な方法でフォームをレイアウトする必要があります。とにかくここに私が知っている小さなCSSとHTMLを使用する私の最善の試みがあります：
問題は、白い領域内のすべてが完全にレイアウトされていることです...したがって、新しいコンテンツを追加するたびに、周囲のすべての要素を微調整して一緒に再生する必要があります。また、ASP.NETコードビハインドからチェックボックスリストの内容を入力しているため、アイテムの数が常にわからないため、白いボックスが短すぎる場合があります...CSSで新しい高さを手動で修正することでこれを修正します...ご存知のように悪い方法です。
私がこれをどのように行うべきか教えていただけますか？
CSS：
body
{
margin: 0px;
font-family: sans-serif;
font-size: 13px;
color: #111;
background: #c4c4c4 url("bgd.jpg");
}
#header
{
height: 80px;
background-color: #333;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.25), 0 1px 1px rgba(255, 255, 255, 0.3);
}
#wrapper
{
padding: 20px 20px 20px 20px;
height: auto;
}
#footer
{
height: 40px;
background-color: #333;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.25), 0 1px 1px rgba(255, 255, 255, 0.3);
}
#copyright
{
font-size: smaller;
position: relative;
top: 13px;
color: #eee;
text-shadow: 1px 1px #666;
text-align: center;
}
.block
{
margin: 0 auto;
width: 440px;
background-color: white;
border-radius: 6px;
box-shadow: 3px 3px 3px #888888;
}
.block > *
{
position: relative;
}
#login
{
width: 215px;
height: 170px;
}
#login h2
{
background: #353;
}
#controlpanel
{
width: 235px;
height: 175px;
}
#controlpanel h2
{
background: rgb(165,0,0);
}
#options
{
width: 273px;
height:auto;
}
#options h2
{
background: royalblue;
}
.block h2
{
padding: 10px 15px;
color: white;
background: #261F1F;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
h1, h2, h3
{
color: #111111;
margin: 0px;
}
h1
{
color: white;
position: absolute;
top: 15px;
left: 15px;
font-size: 40px;
}
h2
{
font-size: 22px;
}
a:link, a:visited, a:hover, a:active
{
}
a
{
-moz-outline: none;
}
hr
{
background: #dddddd;
color: #dddddd;
}
.button
{
font-weight: bold;
font-size: 11px;
height: 27px;
color: #111111;
padding: 2px 5px;
background: url('btnbgd.png') top;
border: 1px solid #C3C4BA;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.textbox
{
height: 25px;
padding: 0px 3px 0px 3px;
margin: 0;
border: 1px solid #DDD;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
.label
{
text-shadow: 2px 2px 2px #eee;
}
select
{
border: 1px solid #C3C4BA;
border-radius: 3px;
height: 25px;
}
.groupbox
{
text-shadow: 2px 2px 2px #eee;
left: 12px;
width: 250px;
}
fieldset
{
border-radius: 3px;
}
.groupbox legend
{
text-shadow: none;
padding: 2px 4px 2px 4px;
color: white;
background-color: #C3C4BA;
border-radius: 3px;
}
#MainContentPlaceHolder_pnlXRefs legend
{
text-shadow: none;
padding: 2px 4px 2px 4px;
color: white;
background-color: red;
border-radius: 3px;
}
.footer
{
display: table-cell;
vertical-align: middle;
text-align: center;
margin-left: auto;
margin-right: auto;
height: 40px;
background-color: #575654;
}
HTML：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Options.aspx.cs" Inherits="Portal.Options"
MasterPageFile="Portal.Master" Title="Price File Options" %>
<asp:Content runat="server" ContentPlaceHolderID="MainContentPlaceHolder">
<div class="block" id="options">
<h2>
Options</h2>
<asp:Label runat="server" Text="Acc No :" Style="top: 15px; left: 15px;" CssClass="label" />
<asp:TextBox ID="txtAccNo" runat="server" Style="top: 15px; left: 15px; width: 110px"
CssClass="textbox" />
<asp:Button ID="btnGetColours" Style="top: 15px; left: 15px" CssClass="button" runat="server"
Text="Refresh" onclick="btnGetColours_Click" />
<asp:Panel ID="pnlBrembo" runat="server" GroupingText="BREMBO" Style="top: 25px;"
CssClass="groupbox">
<asp:CheckBoxList ID="lstBrembo" runat="server" />
</asp:Panel>
<asp:Label ID="Label1" runat="server" Text="Email :" Style="top: 85px; left: 15px;" CssClass="label" />
<asp:TextBox ID="txtEmail" runat="server" Style="top: 85px; left: 24px; width: 185px"
Text="a@b.com" CssClass="textbox" />
</br>
<asp:Button ID="btnGenerate" Style="top: 100px; left: 12px" CssClass="button" runat="server"
Text="Generate & Send" OnClick="btnGenerate_Click" />
</div>
</asp:Content>
更新1：
高さを取った後：2000px; ホワイトボックスの自動に変更しても、下部にあるいくつかのコントロールがホワイトボックスから押し出されます。
