如何获得两个div来填充<body>页面宽度

在浏览器中打开它时，两个div的组合宽度不能完全满足主体的宽度。我已将第二个（右）div的背景色设置为黑色，以便您可以看到第二个div和页面右侧之间的空白。我试图弄乱边框，边距，但也许我做错了。

.HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="home2.css">
</head>
<body>
<div id="wrapper">
    <main>
        <div id="div1">
            <img src="font-header.png" alt="Image Logo Header">
        </div>
        <div id="div2">
        </div>
    </main>
</div>
</body>
</html>

.CSS：

img {
    border-bottom: 4px solid black;
    position: relative;
    left: 30px;
}
body {
    margin: 0;
}
#div1 {
    height: 756px;
    width: 300px;
    border: 2px solid black;
    float: left;
}
#div2 {
    height: 758px;
    width: 1216px;
    overflow: hidden;
    background-color: black;
}

绝对定位div 并应用媒体查询，以便它们能够响应。希望这有帮助。

 <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Form Example</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="home2.css">
    <style>
        img {
        border-bottom: 4px solid black;
        position: relative;
        left: 30px;
        }
        body {
            margin: 0;
            width: 100%;
        }
        #div1 {
            height: 756px;
            width: 25%; //change width to fit your need
            border: 2px solid black;
            float: left;
            left:0;
            position: absolute;
        }
        #div1 img{
            left: 0;
        }
        #div2 {
            height: 758px;
            width: 75%; //change width to fit your need
            overflow: hidden;
            background-color: blue;
            right:0;
            position: absolute;
        }
    </style>
    </head>
    <body>
    <div id="wrapper">
        <main>
            <div id="div1">
                <img src="font-header.png" alt="Image Logo Header">
            </div>
            <div id="div2">
            </div>
        </main>
    </div>
    </body>
    </html>

由于您使用的是固定宽度，因此它不会正确调整到您的屏幕。在不同的分辨率下，它将无法正确调整到您的屏幕尺寸。请改用 % 宽度。

#div1 {
   height: 756px;
   width: 35%;
    float: left;
}
#div2 {
    height: 758px;
    width: 65%;
    overflow: hidden;
    background-color: black;
}

我已经用你的例子设置了这个小提琴：https://jsfiddle.net/5yfnLcdt/

相关内容

最新更新

热门标签：