这里的任何帮助都会很棒。
我只是想放置一个 100% 屏幕的标题。此 header 内是另一个包含文本的 div。我在全屏下看起来不错，但是当我调整大小时，文本堆叠在彼此之上以适应百分比。
如果我将容器宽度设置为像素而不是百分比，则标题不会拉伸(stretch)整个窗口的长度，除非我指定一个精确的像素数量，如 1463px - 这似乎不对因为虽然它可能适合我的笔记本电脑/屏幕尺寸，但我觉得它不适用于具有最大化窗口的更大屏幕。
我只希望容器中的所有内容都能够根据浏览器宽度和高度的 100% 进行定位，但使用百分比不允许我修复元素，以便它们在调整大小时保持原样。我主要使用百分比并且很难将它们固定在调整大小而不是像素尺寸上，主要是因为使用百分比确保我的内容占据浏览器窗口的 100%，而我不能确定使用像素时用这个。
html, body {
height: 100 % ;
width: 100 % ;
padding: 0;
margin: 0;
}
.container {
width: 100 % ;
height: 100 % ;
margin: 0 auto;
}
#
topbar {
height: 25px;
background - color: #000000;
width: 100%;
}
# topbartext {
font - family: times;
color: #ffffff;
font - size: 11px;
text - align: center;
padding: 5px;
}
文本是在调整大小时移动的内容 - 当我缩小窗口时，文本只是堆叠在彼此的顶部，以便仍然适合屏幕。我不希望它这样做 - 我只希望它固定而不调整大小。
HTML :
<body>
<div class="container">
<div class="header">
<div id="topbar">
<div id="topbartext">$10 SHIPPING TO THE USA FOR ALL ORDERS OVER $150*++ FREE SHIPPING AND RETURNS ON AUSTRALIAN ORDERS OVER $50* ++ *<a href="#">FULL CONDITIONS</a>
</div>
</div>
</div>
</div>
</body>
最佳答案
百分比最适合这个。
如果您希望文本保留在一行中，您可以将以下内容添加到您的 html 和 css 中:
html...
<div id="topbartext" class="topbartext">
CSS...
.topbartext {
white-space: nowrap;
}
注意:
- 在 css 中，最好使用类 (
.topbartext) 而不是 id (#topbartext)。 - 使用此方法意味着如果您使页面比文本窄，您将添加一个水平滚动条(不理想)。您最好让文本换行，在这种情况下您需要删除
height: 25px;。
关于html - 像素和百分比 - 调整浏览器大小时的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22032460/