Question

试图在div.header和div.Main_2之间留出一定的余量，但由于“ position：fixed;”，div.header与div.Main_2重叠。我尝试使用“ margin-bottom：50px;”，但它仍然是叠加的。

有什么方法可以用最少的代码来制作页边距，而无需取出“ position：fixed;”？

CSS：

.header {
  font-size: 10px;
  text-align: left;
  background-color: #333333;
  font-weight: bold;
  color: #FFFFFF;
  padding: 10px;
  border-bottom: 3px solid #4eb151;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  margin-bottom: 50px;
}

HTML：

<body>
  <div class="Main_1">
    <div class="header">
       MyHeader
    </div>
  </div>
  <div class="Main_2">
    <input type="file" name="BttFile" accept="" required class="PathInputFile">
    <input type="submit" class="SubmitStyle_1" value="Upload" name="Upload">
  </div>
</body>

Answer 1

由于42是“ 生命，宇宙和一切终极问题的答案”，请尝试将margin-top:42px;设置为班级Main_2 < / p>

.header {
  font-size: 10px;
  text-align: left;
  background-color: #333333;
  font-weight: bold;
  color: #FFFFFF;
  padding: 10px;
  border-bottom: 3px solid #4eb151;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  margin-bottom: 50px;
}

.Main_2 {
  margin-top:42px;
}

<body>
  <div class="Main_1">
    <div class="header">
       MyHeader
    </div>
  </div>
  <div class="Main_2">
    <input type="file" name="BttFile" accept="" required class="PathInputFile">
    <input type="submit" class="SubmitStyle_1" value="Upload" name="Upload">
  </div>
</body>

或者，按照@KarlenKishmiryan的评论中的建议，您也可以在身体上使用填充物：

.header {
  font-size: 10px;
  text-align: left;
  background-color: #333333;
  font-weight: bold;
  color: #FFFFFF;
  padding: 10px;
  border-bottom: 3px solid #4eb151;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  margin-bottom: 50px;
}

body {
  padding-top:42px;
}

<body>
  <div class="Main_1">
    <div class="header">
       MyHeader
    </div>
  </div>
  <div class="Main_2">
    <input type="file" name="BttFile" accept="" required class="PathInputFile">
    <input type="submit" class="SubmitStyle_1" value="Upload" name="Upload">
  </div>
</body>

Answer 2

如果您的容器带有position: fixed | absolute。在父级中将height设置为固定数字，并为其设置position: relative，以便保留空间。

.header {
  font-size: 10px;
  text-align: left;
  background-color: #333333;
  font-weight: bold;
  color: #FFFFFF;
  padding: 10px;
  border-bottom: 3px solid #4eb151;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.container {
 height: 42px;
 position: relative;
}

<div class="Main_1">
  <div class="container">
    <div class="header">MyHeader</div>
  </div>
  <div class="Main_2">
    <input type="file" name="BttFile" accept="" required class="PathInputFile">
    <input type="submit" class="SubmitStyle_1" value="Upload" name="Upload">
  </div>
</div>

标头与其他主体元素重叠；

2 个答案: