时间戳

首页 > 解决方案 > 我怎样才能让我的代码响应调整页面大小

html - 我怎样才能让我的代码响应调整页面大小

问题描述

我正在尝试为简单的主页制作代码。

有 sub1, sub2 为一个

 html, body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
                margin: 0;
                padding: 0;
                border: 0;
                width : 100%;
                height: 100%;
            }
        .main_wrap {
            position: relative;
            width: 100%;
            height: 100%;
        }
        .sub1 {
            display: inline-block;
            float: left;
            width: 49%;
            height: 100%;
            background-color: #0a4e85;
            text-align: center;
            display: table;
            border: 5px solid white;
        }

        .sub2 {
            display: inline-block;
            float: left;
            width: 50%;
            height: 100%;
            background-color: white;
            text-align: center;
            display: table;
            border: 5px solid #0a4e85;

        }
        .main_title1, .main_title2{
            color : white;
            text-align: center;
            line-height: 1.55;
            white-space: nowrap;
            font-size: 70px;
            display: table-cell;
            vertical-align: middle;
            font-weight: 500;
            text-decoration: none;
        }
 <html>
    <head>
        <title>Main</title>
    </head>
    <body>
    <div class="main_wrap">
        <div class="sub1"><div class="main_title1"><a href="javascript:goPageList();" >A</a></div></div>
        <div class="sub2"><div class="main_title2"><a href="javascript:goPageMonth();" style="color: #0a4e85" >B</div></div>
    </div>
    </body>
    </html>

菜单。每个 div 垂直分割窗口。

但是当我减小窗口宽度大小时，sub2 的第二个 div 低于 sub1。

我想让 sub1,sub2 保持一致。我能做些什么来修复它？

谢谢！！

标签： htmlcss

解决方案

添加box-sizing: border-box;body标签 

 html, body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
                    margin: 0;
                    padding: 0;
                    border: 0;
                    width : 100%;
                    height: 100%;
                    box-sizing: border-box;
                }
            .main_wrap {
                position: relative;
                width: 100%;
                height: 100%;
            }
            .sub1 {
                display: inline-block;
                float: left;
                width: 50%;
                height: 100%;
                background-color: #0a4e85;
                text-align: center;
                display: table;
                border: 5px solid white;
            }
        
            .sub2 {
                display: inline-block;
                float: left;
                width: 50%;
                height: 100%;
                background-color: white;
                text-align: center;
                display: table;
                border: 5px solid #0a4e85;
        
            }
            .main_title1, .main_title2{
                color : white;
                text-align: center;
                line-height: 1.55;
                white-space: nowrap;
                font-size: 70px;
                display: table-cell;
                vertical-align: middle;
                font-weight: 500;
                text-decoration: none;
            }
    <html>
        <head>
            <title>Main</title>
        </head>
        <body>
        <div class="main_wrap">
            <div class="sub1"><div class="main_title1"><a href="javascript:goPageList();" >A</a></div></div>
            <div class="sub2"><div class="main_title2"><a href="javascript:goPageMonth();" style="color: #0a4e85" >B</div></div>
        </div>
        </body>
        </html>

推荐阅读