Question

我对网页设计很陌生，所以我可能完全在我的脑海里......但我似乎无法弄清楚如何使用它。我在我的第一个div中有一个图像，在这个下面我想要更多的div与背景颜色，我将在其中添加内容。但由于某种原因，我的div不会随浏览器调整。每当我将浏览器调整为较小时，div背景就会分离，并且它们之间会有一个空白区域。

任何帮助都将受到高度赞赏。对我明显的编码技巧的任何批评性反馈都将受到高度赞赏。

<!DOCTYPE html>
<html>
<head> <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container">
<div class= "header">
<div class="large-logo-wrap">
<img src="Assets/Giadaslogoindexwhitebig.png" draggable="false"></img>
</div>
<div class="middle">
</div>
<div class="end">
</div>
</body>
</html>

CSS

body{
margin: 0px;
padding: 0px;
overflow: hidden;
}
.container{
width:100%;
margin: 0px;
padding: 0px;
}

.header{
width:100%;
height:768px;
background-image: url('Assets/header.jpg');
background-size: 100%;
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}
.large-logo-wrap {
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
max-width: 700px;
}
.middle{
position: absolute;
top: 768px;
background-color: rgb(229,225,209);
width: 100%;
height:100%;
background-size: 100%;
overflow-y: auto;
 }
.end{
position: absolute;
top: 1500px;
background-color: rgb(29,25,29);
width: 100%;
height:768px;
background-size: 100%;
}

很好。干杯！

Answer 1

我建议你仔细看看这些代码，然后尽可能地去掉你能看到实际需要的东西。 Here is a fiddle有一些清理过的代码可以完成我认为您的目标。希望它有所帮助。

HTML

<header class="container global-header">
    <div class="inner-w">
        <div class="large-logo-wrap">
            <img src="http://placehold.it/400x300" />
        </div>
    </div>
</header>

<section class="container section01">
    <div class="inner-w">
        Middle - arbitrary set height - I suggest you let the content decide the height
    </div>
</section>

<section class="container section02">
    <div class="inner-w">
        Other section - arbitrary set height
    </div>
</section>

CSS

*, *:before, *:after { /* get your box model so that padding and margins go inside the box instead of outside, and add to the overall size of the box */
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}

body {
    margin: 0;
}

.container { /* things the sections have in common */
    width: 100%;
    float: left;
}

.inner-w {
    max-width: 700px;
    margin-right: auto;
    margin-left: auto;
    padding: 1em;
    border: 1px solid rgba(0,0,0,.05); /* just so you can see */
    /* by using an inner div in your container... you allow yourself to maintain a background-color across the whole page if you wish. If you don't want that, then you just style the inner div for each section with the background color */
}

.global-header {
    background-color: lightblue;
    text-align: center; /* centers inline, and inline-block elements (logo) */
}

.large-logo-wrap {
    display: inline-block;
    max-width: 8em; /* set max image size */
}

.large-logo-wrap img { /* responsive image */
    display: block; 
    width: 100%; /* fits whatever you set the wrapper to */
    height: auto;
}

.section01 { /* arbitray section */
    background-color: rgb(229,225,209);
    color: rgb(0,0,0);
    min-height: 234px; /* if you absolutly must - choose a height... use min */
}

.section02 { /* arbitray section */
    background-color: rgb(29,25,29);
    color: rgb(229,225,209);
    min-height: 346px; /* if you absolutly must - choose a height... use min */
}

Answer 2

请使用以下内容更改css：

body{
margin: 0px;
padding: 0px;
overflow: hidden;
}

.container{
width:100%;
margin: 0px;
padding: 0px;
}

.header{
width:100%;
height:768px;
background-image: url('Assets/header.jpg');
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}

.large-logo-wrap {
margin-left: auto;
margin-right: auto;
max-width: 700px;
}

.middle{
margin-left: auto;
margin-right: auto;
max-width: 700px;
background-color: rgb(229,225,209);
 }

.end{
margin-left: auto;
margin-right: auto;
max-width: 700px;
background-color: rgb(29,25,29);
}

您的某些css个样式是错误的，例如您使用width和height %100这是错误的并影响了所有css样式。此外，您对position:absolute影响不可调整的所有div使用了div。

Div不会调整以调整浏览器窗口

2 个答案:

HTML

CSS