Question

我想知道如何在同一父div中相对于固定位置div定位div。这是我的html结构：

<div class="container">

  <header class="site-header>
  </header>

  <div class="site-page">
  </div>

</div>

这是我的css：

div.container {
 max-width: 100vw;
 height: 100%;
 margin: 0 auto;
 padding: 0 auto;
}

.site-page {
 display: inline-block;
 float: right;
 width: 80%;
 height: 100%;
}

.site-header {
 width: 80%;
 text-align: right;
 position: fixed;
 right: 0;
 float: right;
}

那么，我如何相对于.site-header类的底部创建.site-page类？

Answer 1

只需添加margin-top或padding-top固定元素的高度。我使用了填充而不是边距，因为div的高度增加可以用border-box来对抗或者，如果您选择使用保证金，请使用height: calc(100% - AmountOfHeader)。

此外，没有padding: auto，0或正值。

https://jsfiddle.net/8evLtbgr/

div.container {
  max-width: 100vw;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  
color: white;
}

.site-header {
  width: 80%;
  text-align: right;
  position: fixed;
  right: 0;
  float: right;
  
height: 100px;
background-color: blue;
}

.site-page {
  display: inline-block;
  float: right;
  width: 80%;
  height: 100%;
  
padding-top: 100px; /* height of header */
background-color: green;
}


/***********/

body { height: 100vh; width: 100vw; margin: 0; } /*need this, because page is empty*/

*, ::before, ::after {
  box-sizing: border-box; /* padding and border won't increase size of the elements, namely .site-page */
}

<div class="container">

  <header class="site-header">site-header</header>

  <div class="site-page">site-page</div>

</div>

如何相对于固定位置div定位div？

1 个答案: