所以我有一个漂亮的单页网站，在一个屏幕上看起来很棒，但是当我更换浏览器并使用更大的屏幕时，页面的方面总是看起来不同。我知道bootstrap会解决这个问题，但不幸的是我不能出于其他原因在引导程序中执行...有人可以帮忙吗？
CSS
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Siemens.Packing.PackingStatsShiftOverview.Default" %>
<!DOCTYPE html>
<html>
<head>
<title>Packing Shift Summary</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
window.setTimeout('document.forms[0].submit()', 5000); //refresh the page (without losing state)
</script>
</head>
<body style="height: 100%">
<form runat="server" name="PackingStatsForm">
<div style="height:100%">
<div class="split left">
<div class="center" width:100%>
<h1>TOTAL QUANTITY PACKED</h1>
<asp:Label ID="labeltotal" runat="server" Font-Size="190pt" style="text-align: center; padding-top: 800px; color: #ff0000; transform: translate(-50%, -50%); text-align: center; padding-left: 90px; " CssClass="auto-style1" Font-Bold="True"></asp:Label>
</div>
<div class ="center" width:100%>
<img class ="imgFooter" src="Logo/siemensblack1.png" />
</div>
</div>
<div class="split right">
<div class="center" width:100%>
<asp:DropDownList ID="DDLProduct" runat="server" AutoPostBack="True" OnSelectedIndexChanged="Dropdownlist1_SelectedIndexChanged" Font-Bold="True" ViewStateMode="Enabled" >
</asp:DropDownList>
<h1>CELL TARGETS & ACTUAL FIGURES</h1>
<asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="black" BorderStyle="Ridge" CellPadding="22" ForeColor="Black" GridLines="Horizontal" HorizontalAlign="Center" Font-Size="23px" OnRowDataBound="GridView1_RowDataBound" Width="100%" Font-Bold="True" >
<AlternatingRowStyle BackColor="White"/>
<FooterStyle BackColor="#CCCC99"/>
<HeaderStyle BackColor="white" Font-Bold="True" ForeColor="black"/>
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right"/>
<RowStyle BackColor="#F7F7DE"/>
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="black"/>
<SortedAscendingCellStyle BackColor="#FBFBF2"/>
<SortedAscendingHeaderStyle BackColor="#848384"/>
<SortedDescendingCellStyle BackColor="#EAEAD3"/>
<SortedDescendingHeaderStyle BackColor="#575357"/>
</asp:GridView>
<div class="center" width:100% >
<img class="imgFooter" src="Logo/siemenswhite1.png" />
</div>
</div>
</div>
</div>
</form>
</body>
</html>
CSS
body {
font-family: Arial;
color: white;
}
.split {
height: 100%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #110;
width: 30%;
height: 100%;
text-align: center;
}
.right {
right: 0;
background-color: white;
width: 70%;
text-align: center;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.center {
text-align: center;
}
.auto-style1 {
position: absolute;
width: 100%;
height: 100%;
top: 49%;
left: 43%;
}
h1 {
color: red;
font-weight: bold;
padding-top: 20px;
}
div { padding: 30px 10px 15px; }
.imgFooter {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
bottom: 10%;
}
.clsLeft {
float: left;
width:30%;
background-color:Cyan;
}
.clsRight {
width:70%;
float:right;
background-color:Yellow;
}
.clsColumn {
height: 100%;
text-align: center;
}
table {
border: 1px solid black;
background-color:White;
margin: 0 auto; /* or margin: 0 auto 0 auto */
}
th {
font-style:Bold;
background-color:White;
}
td {
text-align: center;
}
#parent {
Height:100%;
display: table;
}
#child {
font-size:24pt;
display: table-cell;
vertical-align: middle;
}
答案 0 :(得分：0)
使用浮动和绝对定位不是响应式Web开发的最佳解决方案，您可以将flexbox应用于容器并具有漂亮的外观，让我为您的表单建议一个解决方案：
<!DOCTYPE html>
装箱班次总结
<script>
window.setTimeout('document.forms[0].submit()', 5000); //refresh the page (without losing state)
</script>
<form runat="server" name="PackingStatsForm">
<!-- <div style="height:100%"> -->
<div class="split left">
<div class="center" width:100%>
<h1>TOTAL QUANTITY PACKED</h1>
<asp:Label ID="labeltotal" runat="server" Font-Size="190pt" style="text-align: center; padding-top: 800px; color: #ff0000; transform: translate(-50%, -50%); text-align: center; padding-left: 90px; "
CssClass="auto-style1" Font-Bold="True"></asp:Label>
</div>
<div class="center" width:100%>
<img class="imgFooter" src="Logo/siemensblack1.png" />
</div>
</div>
<div class="split right">
<div class="center" width:100%>
<asp:DropDownList ID="DDLProduct" runat="server" AutoPostBack="True" OnSelectedIndexChanged="Dropdownlist1_SelectedIndexChanged"
Font-Bold="True" ViewStateMode="Enabled">
</asp:DropDownList>
<h1>CELL TARGETS & ACTUAL FIGURES</h1>
<asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="black" BorderStyle="Ridge" CellPadding="22" ForeColor="Black"
GridLines="Horizontal" HorizontalAlign="Center" Font-Size="23px" OnRowDataBound="GridView1_RowDataBound" Width="100%"
Font-Bold="True">
<AlternatingRowStyle BackColor="White" />
<FooterStyle BackColor="#CCCC99" />
<HeaderStyle BackColor="white" Font-Bold="True" ForeColor="black" />
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<RowStyle BackColor="#F7F7DE" />
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="black" />
<SortedAscendingCellStyle BackColor="#FBFBF2" />
<SortedAscendingHeaderStyle BackColor="#848384" />
<SortedDescendingCellStyle BackColor="#EAEAD3" />
<SortedDescendingHeaderStyle BackColor="#575357" />
</asp:GridView>
</div>
<div class="center" width:100%>
<img class="imgFooter" src="Logo/siemenswhite1.png" />
</div>
</div>
<!-- </div> -->
</form>
在html中，我评论（删除）了div容器，我将flexbox仅应用于父元素，在这种情况下是父元素。
body {
font-family: Arial;
color: white;
}
.center {
text-align: center;
border: 1px solid red;
}
h1 {
color: red;
font-weight: bold;
}
div {
padding: 30px 10px 15px;
}
form {
display: flex;
height: 100vh;
justify-content: space-between;
width: 100%;
}
.split {
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: 100%;
height: 100%;
}
.left {
background-color: black;
flex: 0 0 30%;
}
.right {
flex: 0 0 70%;
}
th {
font-style: Bold;
background-color: White;
}
td {
text-align: center;
}
@media only screen and (max-width: 480px) {
form {
flex-flow: column nowrap;
}
}
在CSS中我用flexbox替换了浮点数，形式高度为100vh，因此你的表单将占用任何屏幕的100％高度，.left和.right具有30％和70％的弹性基础，保持使用相对单位比使用像素更好的响应设计，也使用移动和平板电脑的媒体查询，如果屏幕小于480px，我在这里使用一个断点将两个部分堆叠在列视图中，我将链接引用到flexbox，它是一个非常有用的资源，你也可以在链接的codpen中看到这段代码..希望有帮助