填充内容分区的剩余高度

时间：2018-08-03 05:05:03

标签： html css html5 css3

我期待在CSS中做到这一点

 ---------------------
| Some Super long     |
| Span Text           |
|                     |
|                     |
|                     |
|                     |
|                     |
|                     |
|_____________________|
|          |          |
|   YES    |    NO    |
|__________|__________|

下面是我的代码：

.page-container {
  position: absolute;
  width: 94%;
  margin: 0px 3%;
  background-color: transparent;
  border-radius: 10px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.yes-no-buttons-container {
  position: absolute;
  bottom: 0;
  width: 100%;
}
<div data-container="" class="page-container" style="height: 92.5%;">
  <div id="b3-b2-ContentPlaceholder" style="background-color: #cecece;">
    <div style="">
      <span data-expression="" style="">Some super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text here</span>
    </div>
    <div data-container="" class="yes-no-buttons-container">
      <div>
        <div data-container="" class="">
          <button data-button="" type="button" style="width: 49%;">
                            <span data-expression="">Yes</span>
                        </button>
          <button data-button="" type="button" style="width: 49%; margin-left: 2%;">
                            <span data-expression="">No</span>
                        </button>
        </div>
      </div>
    </div>
  </div>
</div>

我无法创建内容div来填充剩余高度，并用其内部的span作为内容的唯一子元素。

有什么建议吗？

4 个答案:

答案 0 :(得分：0)

从.yes-no-buttons-container删除绝对位置

.page-container {
  position: absolute;
  width: 94%;
  margin: 0px 3%;
  background-color: transparent;
  border-radius: 10px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.yes-no-buttons-container {
   position: sticky;
  bottom: 0;
  width: 100%;
}
<div data-container="" class="page-container" style="height: 92.5%;">
  <div id="b3-b2-ContentPlaceholder" style="background-color: #cecece;">
    <div style="">
      <span data-expression="" style="">Some super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text here</span>
    </div>
    <div data-container="" class="yes-no-buttons-container">
      <div>
        <div data-container="" class="">
          <button data-button="" type="button" style="width: 49%;">
                            <span data-expression="">Yes</span>
                        </button>
          <button data-button="" type="button" style="width: 49%;">
                            <span data-expression="">No</span>
                        </button>
        </div>
      </div>
    </div>
  </div>
</div>

答案 1 :(得分：0)

这将为您工作：

我已根据您的想法更改了一些CSS。

为了更好的效果，我删除了.yes-no-buttons-container的样式。

body {
  margin: 0;
  padding: 0
}

#b3-b2-ContentPlaceholder {
  display: inline-block;
  padding:20px;
}

#b3-b2-ContentPlaceholder>div>span{
  display:inline-block;
  height:60vh;
  overflow:auto;
}
.page-container {
  position: absolute;
  width: 94%;
  margin: 0px 3%;
  background-color: transparent;
  border-radius: 10px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}


/*.yes-no-buttons-container {
  position: absolute;
  bottom: 0;
  width: 100%;
}*/

.btn_wrap {
  padding-top: 10px;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
}

.btn_wrap [type="button"] {
  float: left
}
<div data-container="" class="page-container">
  <div id="b3-b2-ContentPlaceholder" style="background-color: #cecece;">
    <div style="">
      <span data-expression="" style="">Some super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text here</span>
    </div>
    <div data-container="" class="yes-no-buttons-container">
      <div>
        <div data-container="" class="btn_wrap">
          <button data-button="" type="button" style="width: 49%;">
                            <span data-expression="">Yes</span>
                        </button>
          <button data-button="" type="button" style="width: 49%; margin-left: 2%;">
                            <span data-expression="">No</span>
                        </button>
        </div>
      </div>
    </div>
  </div>
</div>

希望这对您有所帮助。

答案 2 :(得分：0)

您要寻找的是sticky的{​​{1}}属性和职位的YES按钮。

NO

MDN提到它为：

  

粘性定位元素是其计算位置的元素   价值是粘性的。直到它被定位为相对位置   包含块超过了指定的阈值（例如将top设置为   在其流根（或其容器）中的值（不是auto）   在其中滚动），这时它被视为“卡住”，直到见面为止   其包含块的相对边缘。

在您的代码中实现它：

.yes-no-buttons-container {
  position: sticky;
}

.page-container {
  position: absolute;
  width: 94%;
  margin: 0px 3%;
  background-color: transparent;
  border-radius: 10px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.yes-no-buttons-container {
  position: sticky;
  bottom: 0;
  width: 100%;
}

答案 3 :(得分：0)

您可以按照以下方式使用flex进行操作

.container {
  display: flex;
  flex-direction: column;
  height: 200px; /* it can be anything */
  width: 480px; /* it can be anything */
  margin: 0 auto;
}

.content {
  display: flex;
  flex: 5;
  background-color: transparent;
  border-radius: 10px;
  overflow-y: scroll;
}

.actions {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.actions button {
  width: 40%;
  border-radius: 2px;
  color: #FFF;
  background-color: #0095ff;
  border-color: #07c;
  box-shadow: inset 0 1px 0 #66bfff;
  border: 0;
  margin: 0 4px;
  font-weight: 400;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container" >
    <div class="content">
      Some super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text here
    </div>
    <div class="actions">
      <button>Yes</button>
      <button>No</button>
    </div>
  </div>
</body>
</html>

相关问题
最新问题