Question

我正在尝试使用填充所有垂直空间的框架创建一个网站，例如变小，溢出的内容变得可滚动。

html和body height设置为100vh，所有box父项都设置为100％。我没有找到另一种方法，这导致每个父母都是100vh，最终网站溢出。

我做错了什么？我觉得我只是错过了正确的位置：＆＃34;属性......

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Pastebook</title>
  <style type="text/css">
    html,
    body {
      height: 100vh;
    }
    /*central panel*/
    .central {
      position: absolute;
      width: 100%;
      margin: 0 auto;
      height: 100%;
      border: 3px solid blue;
    }
    /*central middle panel*/
    .middle {
      margin: 0 auto;
      max-width: 970px;
      height: 100%;
      border: 3px solid yellow;
    }
    /*content panel*/
    .contentPanel {
      margin: 0 auto;
      padding-top: 0px;
      height: 100%;
      border: 3px solid lightgreen;
    }
    /*Clipboard Box*/
    .clipboard {
      border-radius: 5px;
      border: 5px solid gray;
      font-size: 100%;
      overflow: auto;
      padding: 5px;
      height: 100%
    }
    /*Example content*/
    .content {
      height: 100px;
      background: lightgray;
      margin: 5px;
    }
  </style>

</head>

<body>
  <div class="central">
    <div class="content">
      central
    </div>
    <div class="middle">
      <div class="content">
        middle
      </div>
      <div class="contentPanel">
        <div class="content">
          content
        </div>
        <div class="clipboard">
          <div style="height:400px; background: lightgray; margin:5px;">
            clipboard
          </div>
          <div style="height:400px; background: lightgray; margin:5px;">
            clipboard
          </div>
          <div style="height:400px; background: lightgray; margin:5px;">
            clipboard
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

我尝试了一些改变，这是有效的

html,
body {
  height: 100vh;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
/*central panel*/

.central {
  width: 100%;
  margin: 0 auto;
  height: 100vh;
  border: 3px solid blue;
  box-sizing: border-box;
  overflow: hidden;
}
/*central middle panel*/

.middle {
  margin: 0 auto;
  max-width: 300px;
  border: 3px solid yellow;
  box-sizing: border-box;
  height: calc(100vh - 55px);
  overflow: hidden;
}
/*content panel*/

.contentPanel {
  margin: 0 auto;
  padding-top: 0px;
  border: 3px solid lightgreen;
  box-sizing: border-box;
  height: calc(100vh - 110px);
  overflow: hidden;
}
/*Clipboard Box*/

.clipboard {
  border-radius: 5px;
  border: 3px solid gray;
  box-sizing: border-box;
  overflow: scroll;
  padding: 5px;
  height: calc(100vh - 165px);
}
/*Example content*/

.content {
  background: lightgray;
  margin: 5px;
  height: 40px;
}

告诉我，如果某些东西不起作用或者我做错了什么:) 编辑：好的，所以我进一步调查了一下你可以

使用弹性盒子（我无缘无故）
javascript（这是一个更糟糕的解决方案，但也有效）
css calc（）函数（我在底部包含了这个）
- 这可以更好地使用css插件，让你使用高度 calc（）函数内的其他元素

<!DOCTYPE html>
<html>

<head>
  <title>Pastebook</title>
</head>

<body>
  <div class="central">
    <div class="content">
      central
    </div>
    <div class="middle">
      <div class="content">
        middle
      </div>
      <div class="contentPanel">
        <div class="content">
          content
        </div>
        <div class="clipboard">
          <div style="height:400px; background: lightgray; margin:5px;">
            clipboard
          </div>
          <div style="height:400px; background: lightgray; margin:5px;">
            clipboard
          </div>
          <div style="height:400px; background: lightgray; margin:5px;">
            clipboard
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

{{ form_widget(value.children.activity, { value: object.id|trim }) }}

Answer 2

尝试

.central 
{
   overflow-y: auto;
}

css使父div 100％高度和子可滚动

2 个答案: