Question

我正在努力弄清楚为什么我有一个高度元素：100％比容器大，尽管盒子大小设置为border-box;

我在这里做了一个小提琴：https://jsfiddle.net/a8v9a8ok/6/

我已经将元素设置为100％高度并将框大小设置为边框，但是名为“left”的部分中包含的文章正在流过该部分，并且它包含的文本textarea也流过了。

normadize -a- gmail -d- com

我不只是想隐藏溢出，我希望元素保持在其容器中并将相应的容器填充到100％。

我确信这是一个简单的解决办法，但我一直在努力工作时间无济于事，所以任何帮助都会非常感激！

编辑：我只是想让所有元素都适合它们各自的容器而不会垂直重叠。我希望将textarea高度设置为100％会导致它填充其容器中的剩余空间。

由于

Answer 1

您的article元素有两个孩子：input元素和textarea，其中height: 100%。因此articles的高度加上100％加上输入元素的高度。这就是它溢出的原因。

要解决此问题，您可以将固定高度设置为input，例如40px，并使用height: calc( 100% - 60px) ;（减去40px高度加上2 x 10px作为上边距和下边距）{{1} 1}}。

https://jsfiddle.net/m08tsvzf/1/

Answer 2

我没有得到你的问题。这就是你想要的吗？

Snapshot

如果是，那么这些是css中的变化

main, section, article{
height: 100%;
width: 100%;
margin:5px;
}
textarea{
   height:120%;
   width:1000%;
   max-height:100%;
   max-width:100%;
}


textarea.resize-none {
resize: none; 
 }

main{
background: yellow;
height:100%;
}

#left{
width: 100%;
background: blue;
height: 100%
}

#refresh{
margin-top: -30px;
float:left;
position :relative;
}

尽管包装盒尺寸，包含元件溢出的容器

2 个答案: