1

ウェブサイトの基本的なテンプレートを作成しています。1 つのヘッダーの div コンテナー、ヘッダーの下に水平にリストされたメイン メニュー、Google マップの iframe (可変幅) とサイドバー (絶対幅、右にフローティング) であるメイン コンテンツ、およびフッターがあります。

メインコンテンツの高さに問題があります。ページに合わせてフッターの余白を残しながら、iframe とサイドバーの高さを同じにしたいのですが、メイン コンテンツはページに合わせて拡大するのではなく、常に min-height に設定します。

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行ある可能性があるため、何かが場違いに思われる場合は、おそらくそうです。

固定幅コンテナでこの問題の解決策を見てきましたが、問題はフロート関数の使用にあると思います。これが適切に機能するには、配置を絶対にする必要があることを読みましたが、フロートを使用することが、マップが可変幅を使用してスペースを埋めることを可能にする唯一の方法です。

私がテストしているブラウザと互換性がないという単純なことかもしれませんが、よくわかりません。

事前に感謝し、この投稿が少し面倒な場合は申し訳ありません. 私はすぐにきれいに保つことを学ぶと確信しています;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 に答える