Div不會調整以調整瀏覽器窗口

Question

我是Web設計的新手，所以我可能在這里完全不知所措。但是我似乎無法弄清楚該如何工作。 我在第一個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

我建議您仔細看一下代碼，並盡可能地精簡代碼，以了解到達目的地的實際必要條件。 這是一些整理過的代碼的小提琴，這些代碼可以滿足我的需求。 希望它會有所幫助。

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樣式錯誤，例如，您將%100 width和height使用了錯誤的樣式，並且影響了所有css樣式。 此外，您使用position:absolute的所有股利其對影響div是不可調的。

Div不會調整以調整瀏覽器窗口

問題描述

2 個解決方案

解決方案1
1 已采納 2014-02-23 08:10:05

HTML

CSS

解決方案2
0 2014-02-23 07:53:17

Div不會調整以調整瀏覽器窗口

問題描述

2 個解決方案

解決方案1 1 已采納 2014-02-23 08:10:05

HTML

CSS

解決方案2 0 2014-02-23 07:53:17

解決方案1
1 已采納 2014-02-23 08:10:05

解決方案2
0 2014-02-23 07:53:17