【发布时间】：2018-06-14 19:24:25
【问题描述】：
所以我有一个很棒的单页网站，在一个屏幕上看起来很棒，但是当我更改浏览器并使用更大的屏幕时，页面的外观总是看起来不同。我知道引导程序可以解决这个问题，但不幸的是我不能出于其他原因在引导程序中执行此操作...有人可以帮忙吗？
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;
}
【问题讨论】：
标签： html css positioning