我不会做太多的 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；甚至将其更改为白盒的自动我在底部的一些控件从白盒中推出：
