1

我正在努力弄清楚为什么我有一个 height:100% 的元素，它比它的容器大，尽管 box-sizing 被设置为 border-box;

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

我已将元素设置为 100% 高度并将 box-sizing 设置为边框框，但包含在名为“left”的部分中的文章正在流过该部分，并且它包含的文本 textarea 也正在流过。

html, body {
  height: 100%;
  width: 100%;
}

html {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*, *:before, *:after {
  -moz-box-sizing: inherit;
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

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

我敢肯定这是一个简单的解决方法，但我一直在尝试几个小时无济于事，所以任何帮助将不胜感激！

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

谢谢

4

2 回答 2

0

您的article元素有两个子元素：一个input元素和textarea具有的height: 100%。Soarticles的高度加起来是输入元素高度的 100%。这就是它溢出的原因。

要解决这个问题，您可以给 . 提供一个固定的高度input，例如 40px，然后height: calc( 100% - 60px) ; 在其上使用（减去 40px 高度加上 2 x 10px 的顶部和底部边距）article。

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

于 2017-08-21T15:05:16.537 回答
0

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

快照

如果是，那么这些是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;
}
于 2017-08-21T15:55:15.837 回答