孩子div溢出到父div的溢出

我一直在试图解决我正在做的这个问卷的一些问题。我已经重新格式化了这个问题，因为我的旧问题很混乱，我正在就这个问题发表一个新的观点。孩子div溢出到父div的溢出

随着新代码的提出，问题在于.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>

这是它看起来像我的应用程序里面。

这就是我想要实现的。

来源

2016-07-20 Jleibham

请您简化你的问题，其目前非常复杂的理解 – ZenKurd

是啊，我明白了。我想现在我遇到的大问题是导航栏正在滚动文本。我希望它始终位于容器的底部，然后将文本在其后面滚动。如果您使用开发工具并使屏幕尺寸变得非常小，这将在代码段中进行说明。我知道这个问题很混乱，部分原因是我在改变我的代码来修复它时遇到了很多不同的问题。我将制作一张应该看起来如何的截图，以便可以帮助解决方案。 – Jleibham

我添加了最终结果外观的图像。所以我有一个大容器，调整大小以适应浏览器的窗口。在大容器内部还有另一个容器存放问题，一个存放导航。无论出于何种原因，大容器内的这两个容器不能很好地融合在一起。 – Jleibham

这个问题有点过于复杂，但我认为这里的问题是您无法向下滚动并查看.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; 
}

来源

2016-07-21 00:01:07 Toby

对不起，复杂的问题我认为我的大脑是通过这一整天工作煎炸哈哈。我明白你的建议，但不幸的是，那不是我所需要的。问题是导航栏正在滚动隐藏的信息。所以它通常位于底部，但只要用户滚动文本，导航就随之移动。 – Jleibham

有相当多的事情，我在你的下面的代码片段改变 - 这将是太很多解释一切。不过，一些最重要的变化：

没有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>

来源

2016-07-21 00:14:54 Johannes

谢谢约翰内斯，它看起来像脚注在窗口的底部，而不是现在的容器。让我再看看你的代码，看看我能否修复它。但我很感激帮助。祝您有个愉快的夜晚！ – Jleibham

尝试在.questionnaire改变这三样东西-nav：

位置到固定
宽度75％
和删除的保证金左：-20px;

这是否适合您？

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; 
 
}

<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>

来源

2016-07-21 01:02:33

你这样做吗？ –

是的，但问卷导航已被设置为固定，并且负边距被设置为对付包含div的填充。 – Jleibham

对不起，你是对的，它被设置为绝对。但是，如果我将导航设置为固定的，而不是位于容器中，它位于浏览器窗口的底部...我将重新格式化我的问题，因为它很混乱，我试图解决这个问题现在在不同的角度... – Jleibham

孩子div溢出到父div的溢出

回答

相关问题