Question

我正在构建一个包含两个div的简单网页：

<body>
  <div id="content"><img src="img/Apples.jpg"></div>
  <div id="footer"><p>Some words!</p></div>
</body>

“content”div必须始终位于“footer”div之上，并且必须始终在每个页面大小上显示两个div。
我该怎么办？

谢谢！

这是我的CSS：

body {
    padding: 18px;
}

#content {
    /*width: 70%;*/
    height: 70%;
    display: block;
    margin: auto;
}

#content img {
    width: 100%;
    height: auto;
}


#footer{
    /*width: 30%;*/
    height: 30%;
    display: block;
    margin: auto;
}

#footer p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

更新

这是我的解决方案：

HTML：

<body>
    <div id="content"></div>
    <div id="footer"><p>Some words!</p></div>
</body>

样式表：

body {
    padding: 20px;
}

#content {
    width: 100%;
    background-image: url('img/Apples.jpg');
    background-size: cover;
    background-position: center;
    height: 570px;
    margin-bottom: 10px;
}

#footer{
    height: 100%;
    border-style: double;
    border-color: black;
}

#footer p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Landscape phones and down */
@media (max-width: 340px) { 
    #content {
        height: 370px;
    }
}

/* Landscape phone to portrait tablet */
@media (min-width: 340px) and (max-width: 500px) { 
    #content {
        height: 215px;
    }
}

/* Landscape phone to portrait tablet */
@media (min-width: 501px) and (max-width: 767px) { 
    #content {
        height: 660px;
    }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 801px){
    #content {
        height: 870px;
    }
}

但我无法调整每个设备的布局。我该怎么办？

Answer 1

<body>
  <div id="content" style="height:70%;display:block;"><img src="img/Apples.jpg"></div>
  <div id="footer" style="height:30%;display:block;"><p>Some words!</p></div>
</body>

如何制作完全响应的网页

1 个答案: