Question

我决定转向百分比而不是固定像素，希望最大限度地减少完全响应网站的输入，但已经遇到并出现错误。我在导航栏上，当测试它看起来如何时，文本就会从屏幕溢出，就像什么都没有停止它一样！我不知道为什么我尝试过：将它放在包装器中，设置最大宽度，更改填充，边距：0自动;

#nav{
width:100%;
height:10%;
position:fixed;
background:#ccc;
padding-left:10%;
padding-right:10%;
}

Answer 1

您应该使用box-sizing：border-box，因此框的总宽度（包括边框，边距和填充将为100％）。

#nav{
width:100%;
height:10%;
position:fixed;
background:#ccc;
padding-left:10%;
padding-right:10%;
box-sizing:border-box;
}

如果您不使用边框框尺寸，则框的总宽度将变为指定的宽度+填充+边距+边框。

Answer 2

从它的外观来看，问题可能是你的身高属性。我假设文字在屏幕上溢出，而不是在屏幕旁边？

设定一个高度通常是一个坏主意，特别是因为百分比高度可能会非常刺激。例如，内联元素的百分比宽度和高度取决于它们内部的任何内容。如果那是“你好”这个词，那么这个词的大部分将会占据这个词的10％。

通过响应式设计，通常最好使用百分比作为宽度，只需将高度设置为“自动”，或者在大多数浏览器中，您可以不将它放在CSS中，因为“auto”无论如何都是默认值。

但是，为了快速修复“阻止文本溢出开箱”，“溢出：隐藏”将隐藏任何流出元素的内容。