具有可变高度的iframe和div框的div容器无法正确展开

Question

I am making a basic template for a website. 我正在为网站制作一个基本模板。 It has div containers of 1 header, a main menu listed horizontally below the header, the main content which is a google maps iframe (variable width) and a sidebar (absolute width, floated right) and a footer. 它具有1个标题的div容器，在标题下方水平列出的主菜单，主要内容是google maps iframe（可变宽度），侧边栏（绝对宽度，向右浮动）和页脚。

I am having some trouble with the height of the main content. 我对主要内容的高度有些麻烦。 I would like the iframe and the sidebar to have equal height whilst fitting to the page and leaving a margin for the footer but the main content always sets itself to min-height rather than stretching to the page. 我希望iframe和侧边栏具有相等的高度，同时适合页面并为页脚留有边距，但是主要内容始终将自身设置为最小高度，而不是拉伸至页面。

HTML 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 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;
}

Note: There may be 1 or 2 unused lines of code that I haven't spotted when I've been playing around with it so if anything seems out of place then it probably is. 注意：当我一直在使用它时，可能没有发现1或2条未使用的代码行，因此，如果有什么地方看起来不合适，那么可能是。

I have seen solutions to this problem with fixed width containers, but I think the problem lies in my use of the float function. 我已经看到了使用固定宽度容器解决此问题的方法，但是我认为问题出在我对float函数的使用上。 I have read that positioning needs to be absolute for this to work properly, however using float is the only way I have been able to find that allows the map to fill the space using variable width. 我已经读到，定位必须是绝对的才能正常工作，但是使用float是唯一能够使地图使用可变宽度填充空间的方法。

It could be something as simple as being incompatible with the browsers I am testing on but I'm not sure. 可能与与我正在测试的浏览器不兼容一样简单，但是我不确定。

Thanks in advance and sorry if this post is a bit messy. 在此先感谢您，如果该帖子有点混乱，请对不起。 I'm sure I will learn to keep clean soon enough ;D 我相信我会尽快学会保持清洁； D

Answer 1

Try these style changes-: 尝试以下样式更改：

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

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

Setting #content to height:auto pushes the #footer div to meet the #content div. 将#content设置为height：auto推动#footer div满足#content div。

and in <iframe> set height to 100% (or 80% to show footer). 并在<iframe>中将高度设置为100％（或显示页脚为80％）。 It still leaves the issue of the map div now pushing the footer to below screen height. 现在仍然留下地图div的问题，现在将页脚推到屏幕高度以下。 To deal with that, possibly set an absolute height for the iframe, or use an alternative to iframe. 为了解决这个问题，可以为iframe设置绝对高度，或者使用iframe的替代方法。

具有可变高度的iframe和div框的div容器无法正确展开

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-04-16 09:41:36

具有可变高度的iframe和div框的div容器无法正确展开

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-04-16 09:41:36

解决方案1
1 已采纳 2013-04-16 09:41:36