html - CSS、HTML 在所有尺寸的屏幕上保持外观相同

标签 html css positioning

所以我有一个漂亮的单页网站，在一个屏幕上看起来很棒，但是当我更换浏览器并使用更大的屏幕时，页面的外观总是看起来不一样。我知道 Bootstrap 可以解决这个问题，但不幸的是我不能出于其他原因在 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%>

            &nbsp;
            <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;
       }

最佳答案

使用 float 和绝对定位不是响应式 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%>

                &nbsp;
                <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 替换了 float ，在表单中，高度为 100vh，因此您的表单将占据任何屏幕的 100% 高度，.left 和 .right 的 flex-basis 分别为 30% 和 70%，保持使用相对单位以获得比使用像素更好的响应设计，还使用移动设备和平板电脑的媒体查询，如果屏幕小于 480 像素，我在这里使用一个断点将两个部分堆叠在列 View 中，我将链接到 flexbox 的引用，这是一个非常有用的资源，您也可以在链接的 codpen 中看到这段代码。希望能有所帮助

FlexBoxGuide

Codepen

关于html - CSS、HTML 在所有尺寸的屏幕上保持外观相同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50851913/

上一篇：javascript - 单击新元素时折叠分层导航，Bootstrap 4

下一篇：javascript - iPhone Safari 上固定标题背景的问题

相关文章：

html - 如果选中 radio ，标签周围的边框

html - 动画结束后网格单元不会从布局中消失

CSS 网格不会填满屏幕

JavaScript/jQuery : detecting which of two elements is in front

javascript - 为什么我的右浮动元素越来越多地出现在左侧

javascript - 使用粘性导航栏平滑滚动 Bootstrap 页面

html - 如何以 Angular 提交复选框值

javascript - 将分页点和文本标题添加到小型 jQuery 轮播

javascript - 修复了容器 Div 中的 Div，使其仅在到达浏览器顶部时向下滚动

html - 如何使用 ARIA HTML5 对屏幕阅读器和其他 AT 隐藏 ASCII 艺术？

©2024 IT工具网  联系我们