【问题标题】:CSS percentage widths out of document width?CSS百分比宽度超出文档宽度?
【发布时间】:2016-07-15 16:10:47
【问题描述】:

我在a website I've been working on 上设置了1000pxmin-width。在标题中,(floated) 链接各有一个百分比 width (25%),<nav> 有一个全宽 (100%)。

现在,当窗口太小时,标题和导航栏会在 100% 窗口宽度处被截断(它不会扩展到溢出区域)。

是否有任何方法(仅使用 CSS)将标题扩展到完整的 document 宽度(而不是 window 宽度),然后相应地调整链接大小?谢谢。

【问题讨论】:

  • 我没有看到问题。你是什​​么意思'被切断'?导航中断,但这是意料之中的......如果您不希望文本中断,为什么不使用 CSS 中的媒体查询使其更小?
  • @Narxx 我不希望导航中断。 <nav> 栏在窗口的末端变得很短,但我希望它扩大到那里。这是我制作移动网站(带有媒体查询)之前的临时解决方案
  • 为什么不给标题和内容一样的宽度属性呢? calc(100% + 80px) ?就个人而言,我不明白您为什么要这样做,这对我来说没有意义,但是如果您希望这两个部分具有相同的宽度,并且您手动更改其中一个,那么也更改另一个...
  • 内容的位置是这样的,所以它的两边都用40px 边距填满。我希望标题填满整个 document 宽度。
  • 全宽和 40 像素边距?这对我来说没有意义。要么你想要全宽,要么 40px 边距。您可以给它媒体查询以在桌面分辨率上具有内边距,在移动设备上具有全宽,但我不会使用 100% + 80px 作为宽度来实现这一点。它会创建滚动,这很糟糕。

标签: html css width percentage


【解决方案1】:

您需要将所有数据(如:header,#container,footer) 包装在 wrapper div <div id="wrapper"></div> 中,从正文中删除 padding-top 属性并使用下面提到的css

#wrapper{padding-top: 150px;position: relative;}

【讨论】:

    猜你喜欢
    • 2013-08-23
    • 2018-01-06
    • 2012-09-05
    • 2013-11-01
    • 1970-01-01
    • 2012-02-20
    • 2012-06-19
    • 2010-12-03
    相关资源
    最近更新 更多