Question

当我缩小页面时，底部的图像将覆盖顶部的其他图像（背景）。当我放大右侧的空白区域时。我的页脚也不见了。如何解决这个问题？ https://jsfiddle.net/egdeLy1c/

myarray=['1.2','2.3','1.00','1.2','1.2','4.7','4.7','3.2','5.5','1.2','4.7']
u=['hi','hello','bye','hi','hi','nice','ok','yup','i', 'heya', 'ok']

new_array = []
new_u = []
for word, count in zip(u, myarray):
    if word in new_u:
        continue
    else:
        new_array.append(count)
        new_u.append(word)

print(new_array)
print(new_u)
#  ['1.2', '2.3', '1.00', '4.7', '4.7', '3.2', '5.5', '1.2']
#  ['hi', 'hello', 'bye', 'nice', 'ok', 'yup', 'i', 'heya']

body {
    margin: 0px;
}

/* Properties for background image here */
#wrapper {
    width: 100%;
    height: 100%;
    background-image: url("http://citywallpaperhd.com/download/71-huge-impressive-city-at-night.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}


#logo {
    padding-top: 30px;
    padding-left: 25px;
    float: left;
}


#navigation {
    width: 100%;
    height: 90px;
    background-color: #000000;
}

#navigation ul {
    margin: 0px;
    padding: 30px;
    text-align: center;
    list-style-type: none;
}

#navigation li {
    width: 15%;
    font-size: 18px;
    padding: 0px 0px;
    display: inline-block;
    color: #ffffff;
}

#navigation a {
    padding: 5px; 
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
}

#navigation a.current {
    color: #000000;
    background-color: #ffffff;
    border-radius: 8px; 
}

#navigation a:hover {
    color: #ff9900;
}


#banner-text {
    width: 1200px;
    margin: 250px 50px; 
    font-size: 42px;
    color: #ffffff;
}

#banner-text p {
    width: 800px; 
    font-size: 24px;
    line-height: 24px;
}


#main-content img, #main-content-2 img{
  width: 50%;
  height: auto;
  float: left;
}


#footer {
    width: 100%;
    height: 200px;
    background-color: #000000;
}

Answer 1

嘿:)我无法重现放大问题。但我把你的页脚带回来了。

如果您是浮动元素，则需要为它们添加Clearfix。在这里，您可以阅读有关clear fix和floats的更多信息

https://www.w3schools.com/css/css_float.asp

对于header-img，如果你想要它总是相同的高度，不要添加％-height。使用像素固定高度...例如750px。

body {
    margin: 0px;
}

/*Clearfix*/

   .clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* Properties for background image here */
#wrapper {
    width: 100%;
    height: 750px;
    background-image: url("http://citywallpaperhd.com/download/71-huge-impressive-city-at-night.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}


#logo {
    padding-top: 30px;
    padding-left: 25px;
    float: left;
}


#navigation {
    width: 100%;
    height: 90px;
    background-color: #000000;
}

#navigation ul {
    margin: 0px;
    padding: 30px;
    text-align: center;
    list-style-type: none;
}

#navigation li {
    width: 15%;
    font-size: 18px;
    padding: 0px 0px;
    display: inline-block;
    color: #ffffff;
}

#navigation a {
    padding: 5px; 
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
}

#navigation a.current {
    color: #000000;
    background-color: #ffffff;
    border-radius: 8px; 
}

#navigation a:hover {
    color: #ff9900;
}


#banner-text {
    width: 1200px;
    margin: 250px 50px; 
    font-size: 42px;
    color: #ffffff;
}

#banner-text p {
    width: 800px; 
    font-size: 24px;
    line-height: 24px;
}


#main-content img, #main-content-2 img{
  width: 50%;
  height: auto;
  float: left;
}


#footer {
    width: 100%;
    height: 200px;
    background-color: #000000;
}

<body>
    <div id="wrapper">
        <nav id="navigation">

            <img id="logo" src="img/logo.png"/>

            <ul>
                <li><a class="current" href="index.html">Home</a></li>
                <li><a href="#">Text</a></li>
                <li><a href="#">Text</a></li>
                <li><a href="#">Text</a></li>
                <li><a href="#">Text</a></li>
            </ul>
        </nav>

        <div id="banner-text">
            <h1>h1 text</h1>
            <p>
                text text text text text text text text text text text text text text text text text text 
                text text text text text text text text text text text text text text text text text text 
            </p>
        </div>
    </div>

    <div id="main-content" class="clearfix">
        <img src="https://livedemo00.template-help.com/wt_61406/images/post-32.jpg"/><img src="https://livedemo00.template-help.com/wt_61406/images/post-32.jpg"/>
   </div>
   
   <div id="main-content-2" class="clearfix">
     <img src="https://livedemo00.template-help.com/wt_61406/images/post-34.jpg"/><img src="https://livedemo00.template-help.com/wt_61406/images/post-34.jpg"/>
   </div>

    <div id="footer">

    </div>

    </body>

一个div在缩放时接管另一个div

1 个答案: