1

我正在为网站制作基本模板。它有 1 个标题的 div 容器，标题下方水平列出的主菜单，主要内容是谷歌地图 iframe（可变宽度）和侧边栏（绝对宽度，向右浮动）和页脚。

我在主要内容的高度上遇到了一些问题。我希望 iframe 和侧边栏具有相同的高度，同时适合页面并为页脚留出边距，但主要内容始终将自身设置为最小高度而不是拉伸到页面。

HTML

<body>
   <div id="wrapper">
      <div id="header"><img src="images/logo.png" width="360" height="127" /> </div><!--header-->

      <div id="menu">
         <ul><li><a href="index.html">Home</a></li>
         <li><a href="about.html">About</a></li>
         <li><a href="network.html">Network</a></li>
         <li><a href="help.html">Help</a></li>
         <li><a href="contact.html">Contact</a></li></ul>
      </div><!--mrnu-->

      <div id="content">
         <div id="sidebar">
         Sidebar
         </div><!--sidebar-->

      <div id="main">
         <iframe id="map" width="100%" height="auto" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps?q=52.988337,3.120117&amp;num=1&amp;ie=UTF8&amp;t=m&amp;z=6&amp;ll=51.206883,7.756348&amp;output=embed"></iframe>
      </div><!--main-->

      <div class="clear"></div>
      </div><!--content-->

      <div class="push"></div><!--push-->

      <div id="footer" class="footer">
      </div><!--footer-->
   </div><!--wrapper-->
</body>
</html>

CSS

body {
    font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
    font-size: 75.00%; 
    color: #fff;
    background: url(images/bg.png);
}
a{
    color: #090; 
    text-decoration:none; 
}
a:focus, a:hover, a:active { 
    color: #FFF;
    text-decoration: underline;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}
* {
   margin: 0;
}
html, body {
   height: 100%;
}
/* div tags */

#wrapper    {
   width: auto;
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -100px;
}
#header { 
   position: relative;
   width: auto; 
   height: auto; 
   background-color: #090; 
}

#menu { 
   width: auto; 
   height: auto; 
   border: 2px solid #000; 
   font-size: 18px; 
}

#menu ul { 
   padding: 0px; 
   margin: 0px; 
   text-align: center; 
}

#menu li { 
   display: inline; 
   padding: 50px; 
}

#content    {
   width: auto;
   height: 100%;
}

#main   {
   width: auto;
   margin-right: 125px;
}
#map    {
   width: 100%;
   height: auto;
}

#sidebar    {
   width: 125px;
   height: auto;
   float: right;
   text-align: center;
   background-color: #FC0;
}

#footer {
   width: auto;
   height: 125px;
   background-color:#CC0;

}
/* classes */

.clear  {
   clear: both;
}

.footer .push   {
   height:125px;
}

注意：可能有 1 或 2 行未使用的代码我在玩它时没有发现，所以如果有什么看起来不合适的地方，那么它可能是。

我已经看到了使用固定宽度容器解决这个问题的方法，但我认为问题在于我使用了 float 函数。我已经读过定位需要是绝对的才能正常工作，但是使用浮动是我能够找到的唯一方法，它允许地图使用可变宽度填充空间。

它可能与我正在测试的浏览器不兼容一样简单，但我不确定。

提前致谢，如果这篇文章有点乱，请见谅。我相信我很快就会学会保持清洁；D

4

1 回答 1

1

尝试这些样式更改-：

#map    {
   width: 100%;
//   height: auto;
}

#content    {
   width: auto;
   //height: 100%;
   height: auto;
}

将#content 设置为height:auto 会推动#footer div 与#content div 相遇。

并将<iframe>高度设置为 100%（或 80% 以显示页脚）。它仍然留下地图 div 现在将页脚推到屏幕高度以下的问题。为了解决这个问题，可以为 iframe 设置一个绝对高度，或者使用 iframe 的替代方法。

于 2013-04-16T09:41:36.570 回答