Javascript 如果浏览器窗口宽度较小，则将导航溢出-页眉拆分为页脚_Javascript_Html_Css_Layout_Overflow

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

javascript html css layout

Javascript 如果浏览器窗口宽度较小，则将导航溢出-页眉拆分为页脚,javascript,html,css,layout,overflow,Javascript,Html,Css,Layout,Overflow,下面是实际的HTML和CSS，页脚中没有所需的溢出（将结果窗口调整为宽度较小的窗口以查看问题）并且应该与iFrame一起工作与您在fiddle中看到的不同，我实际上使用iFrame以便在许多网页中重用导航元素： <body> <iframe class="header" src="header.html"> </iframe> <div class="wrapper"> &

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

（将结果窗口调整为宽度较小的窗口以查看问题）

并且应该与iFrame一起工作与您在fiddle中看到的不同，我实际上使用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>

您可以使用@media为不同的屏幕大小指定css规则。例如：。（我把链接放在页眉和页脚，并根据屏幕大小使用规则来隐藏/显示它们。这既快又脏，但我打赌你会明白的

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

如果您正试图使用[CSS]移动内容，则无法使用[CSS]移动内容。@Connor谢谢，js解决方案也应该可以