html 高度不够,HTML/CSS：Div未扩展到内容高度

最新推荐文章于 2021-12-05 19:54:30 发布

海蒂的万花镜

最新推荐文章于 2021-12-05 19:54:30 发布

阅读量224

点赞数

文章标签： html 高度不够

博主遇到一个CSS布局问题，div元素没有根据内容自动扩展高度，导致内部按钮溢出。问题出现在对话框的按钮div不匹配含有换行文本的对话div的高度。已经尝试了多种解决方案，但问题依然存在。寻求帮助以解决这个CSS布局bug。

摘要由CSDN通过智能技术生成

我有几个未扩展的div元素以匹配其内容的高度。我已经读过，这可能是由浮动内容引起的;这个内容不是浮动的 - 虽然我开始觉得我应该把我的电脑扔在河里。这算不算？HTML/CSS：Div未扩展到内容高度

代码：

#interaction-options-container.display-dialogue {

left: 15%;

width: 70%;

}

#interaction-options-container.full-border, .dialogue-container.full-border {

border: 1px solid #33ffff;

}

#interaction-options-container {

margin: 4px 0px 4px 0px;

z-index: 100;

position: absolute;

left: 35%;

bottom: 4%;

width: 30%;

line-height: 1.4;

opacity: 0.75;

}

#interaction-options-container .heading {

font-size: 16px;

color: black;

padding: 0.1px 12px 0.1px 12px;

background-color: grey;

}

.heading {

font-weight: bold;

font-size: 1.5em;

padding: 8px 12px 0px 12px;

}

#interaction-options-container p {

margin: 8px 0px 8px 0px;

}

#interaction-options-container .dialogue p {

margin: 4px 0px 4px 0px;

}

#interaction-options-container .button, #interaction-options-container .evidence-options-container .button {

cursor: pointer;

color: white;

font-size: 14px;

padding: 0.1px 12px 0.1px 12px;

background-color: #333333;

opacity: 0.85;

border-bottom: 1px solid #8d8d8d;

}

#interaction-options-container .dialogue-container {

padding: 0px;

margin: 0px;

width: 100%;

height: 32px;

background-color: #333333;

float: none;

}

#interaction-options-container .dialogue {

text-align: center;

margin: auto;

font-size: 16px;

font-weight: bold;

padding: 1px 12px 1px 12px;

color: white;

background-color: #333333;

}

.dialogue-container .dialogue.option-divider {

border-bottom: 1px solid #333333;

}

* {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

Choose a reply:

Option one here

Option two here

Option three here

Option four here. As an example this text should be long enough to require wrapping to a new line. I will therefore have to keep typing until I've added enough text to sufficiently fill the horizontal with of the containing div. Also, thanks for potentially answering my question, which I will get to below...

的问题是，当一段对话需要包装到一个新的路线，.dialogue-container .button DIV不高扩展匹配.dialogue的height DIV。因此内部divs延伸越过边界线，这看起来很糟糕。

如果有人有任何指示，我的电脑会感谢你。干杯。

'＃interaction-options-container {display：none}' - 这是一种新的笑话吗？ –

我没有包含JavaScript文件;该特定的div开始隐藏并在需要时显示。应该采取了这条线，对不起。 –