Question

试图让一个占据页面100％的主体减去页眉和页脚。已经设法让它工作，但如果我明智地拉伸页面宽度，％值的高度和margin-bottom css通过收缩或扩展以一种意想不到的方式表现。至少对我来说，这没有任何意义，因为父母根本没有改变大小，会非常欣赏一些见解。

示例：https://gfycat.com/KeenOnlyKawala

的CSS：

.body {
    margin: 0;
    top: 100px;
    bottom: 50px;
}

.row, .col {
    overflow: hidden;
    position: absolute;
}

.row {
    left: 0;
    right: 0;
}
.col {
    top: 0;
    bottom: 0;
}

.scroll-x {
    overflow-x: auto;
}

.scroll-y {
    overflow-y: auto;
}

.Header.row {
    height: 100px;
    top: 0;
}

.Footer.row {
    height: 50px;
    bottom: 0;
}

.SideBar {
    display: inline-block;
    height: 100%;
    width: 200px;
    background-color: #1a1a1a;
}

.SideBarButton {
    display: inline-block;
    height: 100px;
    width: 20px;
    margin-left: -5px;
    margin-bottom: 55%;
    background-color: black;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.Editor {
    display: inline-block;
}

.RightArrow {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-left: 10px solid white;
    border-bottom: 5px solid transparent;
    margin-left: 2px;
    margin-top: 50%;
}

asp.net布局：

<body>
<div class="Header row"></div>
<div class="body row">
    @RenderBody()
</div>
<div class="Footer row">
</div>
</body>

指数：

<div class="SideBar">

</div>
<div class="SideBarButton">
    <div class="RightArrow"></div>
</div>
<div class="Editor">

</div>

Answer 1

抱歉，我没有仔细阅读你原来的问题。尽管如此，.SideBarButton的边距底部为55％，因此随着.body宽度增加，底部边距将会增加。由于.SideBar和.SideBarButton上的垂直对齐是默认值，因此较大的底部边距会有效地推动.SideBar更低。实际设置的高度是正确的，但由于.row overflow:hidden而导致高度被裁剪。

在下面的代码中，我只是将.SideBar设置为vertical-align: top;我不确定这是否是您想要的结果。

.body {
  margin: 0;
  top: 100px;
  bottom: 50px;
}
.row,
.col {
  overflow: hidden;
  position: absolute;
}
.row {
  left: 0;
  right: 0;
}
.col {
  top: 0;
  bottom: 0;
}
.scroll-x {
  overflow-x: auto;
}
.scroll-y {
  overflow-y: auto;
}
.Header.row {
  height: 100px;
  top: 0;
}
.Footer.row {
  height: 50px;
  bottom: 0;
}
.SideBar {
  display: inline-block;
  height: 100%;
  width: 200px;
  background-color: #1a1a1a;
  vertical-align: top;
}
.SideBarButton {
  display: inline-block;
  height: 100px;
  width: 20px;
  margin-left: -5px;
  margin-bottom: 55%;
  background-color: black;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
.Editor {
  display: inline-block;
}
.RightArrow {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-left: 10px solid white;
  border-bottom: 5px solid transparent;
  margin-left: 2px;
  margin-top: 50%;
}

<body>
  <div class="Header row"></div>
  <div class="body row">

    <div class="SideBar">

    </div>

    <div class="SideBarButton">
      <div class="RightArrow"></div>
    </div>

    <div class="Editor">

    </div>

  </div>
  <div class="Footer row">
  </div>
</body>

拉伸页面宽度时，高度100％表现奇怪

1 个答案: