子div的溢出溢出到父div

时间：2016-07-20 23:42:44

标签： html css

我一直在努力解决我正在制作的这份问卷的一些问题。我已经重新格式化了这个问题，因为我的旧问题非常混乱，我正在对这个问题采取新的角度。

使用新代码我总结了问题是.questionnaire-box中的子div .question-container正在溢出超出设置高度的所有文本。我更喜欢.question-container与.questionnaire-box具有相同的高度并在溢出时滚动。

.questionnaire-container {
  position: fixed;
  width: 100%;
  height: 100%;
  padding: 2rem 0;
  background-color: rgba(100, 100, 100, .1);
}

.questionnaire-box {
  position: relative;
  width: 80%;
  max-height: 80%;
  margin: 0 auto;
  background-color: #ffffff;
}

.question-container {
  max-height: 80%;
  overflow-y: scroll;
}

.questionnaire-nav {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 55px;
  border-top: 1px rgba(100, 100, 100, .3) solid;
  background-color: #ffffff;
  text-align: center;
 }

button {
  margin 1rem;
}
<html>
<body>
  <div class="questionnaire-container">
    <div class="questionnaire-box">
      <div class="question-container">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      
      <div class="questionnaire-nav">
        <button>Submit</button>
      </div>
    </div>
  </div>
</body>
</html>

这就是我的应用程序内部的样子。 enter image description here

这就是我想要实现的目标。 enter image description here

3 个答案:

答案 0 :(得分：0)

问题有点过于复杂，但我认为这里的问题是您无法向下滚动并查看.question-container中的所有内容。

这有用吗？

https://jsfiddle.net/tobyl/bemkkz72/

如果是这样，那么关键的CSS就是这个块中的附加padding-bottom：

.questionnaire-box {
  position: relative;
  width: 80%;
  max-height: 80%;
  margin: 0 auto;
  padding: 1.5rem 2rem 6rem 2rem;
  border-radius: 20px;
  background-color: #ffffff;
  overflow: auto;
}

答案 1 :(得分：0)

我在下面的代码段代码中发生了很多变化 - 解释一切都太过分了。还有一些最重要的变化：

  • 没有flexbox
  • 固定元素（nav）在其上方的DIV之外

查看代码。我可以解释一下，如果这是你所追求的，但不是今晚（即“晚安”： - ）...... 

* {
    box-sizing: border-box;
}
html, body {
    height: 100%;
}

.questionnaire-container {  
  width: 100%;
  height: calc(100% -50px);
  padding: 5rem 0;
  background-color: rgba(255, 100, 100, .1);
}
.questionnaire-box {
  width: 80%;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  border-radius: 20px;
  background-color: #ffffff;
}

.question-container {
  height: 100%;
  margin-bottom: 55px;
  padding: 3rem 4rem;
}

.questionnaire-nav {
  position: fixed;
  bottom: 0;
  text-align: center;
  width: 100%;
  height: 30px;
  border-top: 1px rgba(100, 100, 100, .3) solid;
  background-color: #ffffff;
  padding: 10px 0;
}
<html>

<body>
  <div class="questionnaire-container">
    <form class="questionnaire-box">
      <div class="question-container">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor</p>
        <p>in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor</p>
        <p>in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      
  </div>
<nav class="questionnaire-nav">
        <button>Previous</button>
      </nav>
    </form></body>

</html>

答案 2 :(得分：0)

尝试在.questionnaire-nav中更改这三件事：

  • 固定位置
  • 宽度为75％
  • 并删除margin-left：-20px;

这对你有用吗？

＆＃13;
＆＃13; 
html, body {
    max-height: 100%;
}

.questionnaire-container {
  position: fixed;
  width: 100%;
  height: 100%;
  padding: 5rem 0;
  background-color: rgba(255, 100, 100, .1);
}
.questionnaire-box {
  position: relative;
  width: 80%;
  max-height: 80%;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  border-radius: 20px;
  background-color: #ffffff;
  overflow: auto;
}

.question-container {
  height: 100%;
  margin-bottom: 55px;
  padding: 3rem 4rem;
  overflow-y: auto;
}

.questionnaire-nav {
  display: flex;
  position: fixed;
  bottom: 0;
  align-items: center;
  justify-content: center;
  width: 75%;
  height: 55px;
  border-top: 1px rgba(100, 100, 100, .3) solid;
  background-color: #ffffff;
}
＆＃13; 
<html>

<body>
  <div class="questionnaire-container">
    <form class="questionnaire-box">
      <div class="question-container">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
      <nav class="questionnaire-nav">
        <button>Previous</button>
      </nav>
    </form>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题