Question

我正在为网站制作基本模板。它有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个未使用的代码行，当我一直玩它时我没有发现它，所以如果有什么不合适的地方那么可能是。< / p>

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

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

如果这篇文章有点乱，请提前致谢。我相信我会尽快学会保持清洁; D

Answer 1

尝试这些样式更改 - ：

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

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

将#content设置为height：auto会推送#footer div以符合#content div。

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

具有可变高度iframe和div框的div容器未正确扩展

1 个答案: