Question

enter image description here

以下是页脚中没有所需溢出的实际HTML和CSS

http://jsfiddle.net/KristjanLaane/cHmkj/10/
（将结果窗口调整为宽度较小的窗口以查看问题）

并且应该使用iframe

与你在小提琴中看到的不同，我实际上是在使用iframe，以便在许多网页中重复使用导航元素：

<body>
<iframe class="header" src="header.html">
</iframe>
<div class="wrapper">
  <div class="left">
    <div class="holder">
      <div class="content">
      </div>
    </div>
    <iframe class="footer" src="footer.html">
    </iframe>
  </div>
</div>
</body>

Answer 1

您可以使用@media为不同的屏幕尺寸指定css规则。例如：http://jsfiddle.net/drhe8/1/。（我将链接放在页眉和页脚中，并根据屏幕大小使用规则来隐藏/显示它们。它快速而且肮脏，但我打赌你会明白这一点。

@media screen and (max-width:800px) {
  .footer {
      display:block;
  }
  .header {
      display:none;
  } 
}

拆分导航溢出 - 如果浏览器窗口宽度小，则将页眉插入页脚

并且应该使用iframe

1 个答案: