它如何正确设置div的高度？

Question

我是响应式CSS布局的新手 我有以下代码。

.parent{
  position:relative;
  border:1px solid #eee;
}

.child{
  margin-top:30px;
  font-size:18pt;
  border:4px solid #ff6600;
  padding:20px;
  color:#f00;
}

.footer{
   background-color:#333;
   color:#fff;
}

img{
  width:100%;
  z-index:-10;
  position:absolute;
  top:0;
}

<div class="parent">
  <img src="https://www.vacations-abroad.com/assets/img/about.jpg">
  <div class="child">
    The responsive design:<br>
    This is the content.
  </div>
</div>
<div class="footer">
   Footer
</div>

内容必须放在图像上方 我希望在窗口宽度较小且图像高度小于内容文本框高度时，在图像和内容文本之后放置“页脚”。
但是“页脚”覆盖了图像。 我怎么能解决这个问题呢？ 谢谢。 更改窗口宽度时，将得到以下结果

Answer 1

以这种方式更改您的代码。我删除了图片的绝对位置，并将.child添加到.parent{ position:relative; border:1px solid #eee; } .child{ margin-top:30px; font-size:18pt; border:4px solid #ff6600; padding:20px; color:#f00; position: absolute; /* newly added */ top: 60px; /* newly added */ left: 0; /* newly added */ width: 100%; /* newly added */ } .footer{ background-color:#333; color:#fff; } img{ width:100%; }类

＆＃13;

＆＃13;

<div class="parent">
  <img src="https://www.vacations-abroad.com/assets/img/about.jpg">
  <div class="child">
    The responsive design:<br>
    This is the content.
  </div>
</div>
<div class="footer">
   Footer
</div>

＆＃13;

menu.add(0, 0, 0, "Option1").setShortcut('3', 'c');

＆＃13;

＆＃13;

＆＃13;

Answer 2

我对您的代码进行了两处更改。

（1）我将图片position更改为relative Read up on positioning here

（2）我将您的html中img标记的位置换成了.child标记之后。这样它就会放在图像上方。

.parent{
  position:relative;
  border:1px solid #eee;
}

.child{
  margin-top:30px;
  font-size:18pt;
  border:4px solid #ff6600;
  padding:20px;
  color:#f00;
}

.footer{
   background-color:#333;
   color:#fff;
}

img{
  width:100%;
  z-index:-10;
  position:relative;
  top:0;
}

<div class="parent">
    <div class="child">
    The responsive design:<br>
    This is the content.
  </div><img src="https://www.vacations-abroad.com/assets/img/about.jpg">

</div>
<div class="footer">
   Footer
</div>

如果您想拥有背景图片，使用background-image属性可能会“更好”（见下文）;

.parent {
  position: relative;
  border: 1px solid #eee;
}

.child {
  margin-top: 30px;
  font-size: 18pt;
  border: 4px solid #ff6600;
  padding: 20px;
  color: #f00;
  background: url("https://www.vacations-abroad.com/assets/img/about.jpg"); /*this can be cached*/
  min-height: 500px;  /* sets a minimum height*/
}

.footer {
  background-color: #333;
  color: #fff;
}

img {
  width: 100%;
  z-index: -10;
  position: relative;
  top: 0;
}

<div class="parent">
  <div class="child">
    The responsive design:<br> This is the content.
  </div>
  <!--No need for img tag!-->
</div>
<div class="footer">
  Footer
</div>

Answer 3

您的标记具有绝对位置，因此此标记的高度不依赖于.parent div的高度 要解决此问题，您必须将父标记的最小高度设置为与内容或图像高度相同。

试试这段代码。

const fs = require("fs");

// Example Config
let config = {
    DB: "mongodb://blahblah:idhdiw@jsjsdi",
    secret: "thisandthat",
    someScript: "blah.js"
};

// Write to file.
fs.writeFile('config.cfg', JSON.stringify(config), err => {
    if (err) throw err;
    console.log("[+] Config file saved!");
    // Retrieve
    let confData = JSON.parse(fs.readFileSync('config.cfg'));
    console.log(confData.secret);
});


// To save variables in environment variables
// Generally You will not set environment variables like this
// You will have access to setting environment variables incase
// you are using heroku or AWS from dash board. Incase of a machine            
// you can use ** export SOME_ENV_VAR="value" ** in your bash profile
process.env.IP = "10.10.10.10";
// Too risky to put else where.
process.env.API_KEY = "2ke9u82hde82h8";
// Get Data
console.log(process.env.IP);
console.log(process.env.API_KEY);

    .parent{
      position:relative;
      border:1px solid #eee;
      min-height:180px;
    }

    .child{
      margin-top:30px;
      font-size:18pt;
      border:4px solid #ff6600;
      padding:20px;
      color:#f00;
      position:absolute;
    }

    .footer{
       background-color:#333;
       color:#fff;
    }

    img{
      width:100%;
      z-index:-10;
      position:relative;
      top:0;
    }

Answer 4

您必须将高度设置为.parent，因为<img>是绝对位置。

.parent{
  position:relative;
  border:1px solid #eee;
  height: 350px; /* example of height */
}

Answer 5

问题是当您在图像上定义绝对位置时，这将导致图像被排除在页面流之外，因此您的页脚会忽略图像。

尝试将父元素的高度设置为等于图像的高度。

Answer 6

试试这个。更改内容的位置并删除绝对位置：

Your fixed code

.parent {
  border: 1px solid #eee;
}

.child {
  margin-top: 30px;
  font-size: 18pt;
  border: 4px solid #ff6600;
  padding: 20px;
  color: #f00;
}

.footer {
  background-color: #333;
  color: #fff;
}

img {
  width: 100%;
  z-index: -10;
  top: 0;
}

<div class="parent">

  <div class="child">
    The responsive design:<br> This is the content.
  </div>
  <img src="https://www.vacations-abroad.com/assets/img/about.jpg">
</div>
<div class="footer">
  Footer
</div>

Answer 7

发生的事情是元素的高度被设置为其中所有相对定位的内容，而忽略了绝对定位的图像。

您需要做的是将以下内容添加到css：

.parent{
  position:relative;
  border:1px solid #eee;
  overflow: hidden;
  height: 400px;
}

https://jsfiddle.net/w9h9ee04/

随意查看我的jsfiddle以了解其工作原理。从这里你只需要将父级的高度设置为图像的高度。

编辑：

这是另一种解决方案。您可以绝对定位浮动文本框，而不是绝对定位图像。请看这个新的jsfiddle：

https://jsfiddle.net/p11bu007/

这是更新后的css：

.parent{
  position:relative;
  border:1px solid #eee;
}

.child{
  width: 100%;
  text-align: center;
  font-size:18pt;
  border:4px solid #ff6600;
  padding:20px;
  color:#f00;
  position: absolute;
  top: 30px;
}

.footer{
   background-color:#333;
   color:#fff;
}

img{
  width:100%;
}

Answer 8

您已将图像设置为绝对位置，因此它会重叠所有内容。你为什么不用背景来达到你需要的效果？

.parent {
  position: relative;
  border: 1px solid #eee;
  background: url('https://www.vacations-abroad.com/assets/img/about.jpg');
  background-size: cover;
  min-height: 100vh;
}

.child {
  position: relative;
  margin-top: 30px;
  font-size: 18pt;
  border: 4px solid #ff6600;
  padding: 20px;
  color: #f00;
}

.footer {
  position: relative;
  background-color: #333;
  color: #fff;
}

img {
  width: 100%;
  z-index: -10;
  position: absolute;
  top: 0;
}

<div class="parent">
  <div class="child">
    The responsive design:<br> This is the content.
  </div>
</div>
<div class="footer">
  Footer
</div>