0

私は3列のサイトを持っています。左側と右側に height: 100% を指定すると、その列のコンテンツの最後までしか表示されません。フッターまで行きたいです。したがって、列とフッターの間に空きスペースを残さないでください。

追加、 http://jsfiddle.net/3vm2t/1/

CSS

/* RIGHT COLUMN */
#rightcolumn{
float: left;
width: 20%; /*Width of right column in pixels*/
min-width: 200px;
height: 100%;
margin-left: -20%; /*Set margin to that of -(RightColumnWidth)*/
background: #5f5f5f;
color: White;
}

/* LEFT COLUMN */
#leftcolumn{
float: left;
width: 20%; /*Width of left column in percentage*/
min-width: 200px;
height: 100%;
margin-left: -100%;
background: #5f5f5f;
color: White;
}

必要な場合にも

body{
margin:0;
padding:0;
line-height: 1.5em;
color: black;
height: 100%;
}

/*TOPSECTION */
#topsection{
background: url('../images/bannerBGbkup.jpg'), url('../images/bannerBGl.jpg');
background-position: left top, left top;
background-repeat: no-repeat, repeat;
height: 200px; /*Height of top section*/
color: White;
text-align:center;
min-width: 950px;
}

/* middle collumn */
#contentwrapper{
float: left;
width: 100%;
min-width: 1000px;
background: #919191;
}

#contentcolumn{
margin: 0 20% 0 20%; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

私が話していることを説明しようとしましたが、まだ css/html に慣れていませんが、さらに情報が必要な場合はお知らせください。HTML コードが必要かどうかわからない場合は、しかし、そうであれば更新します。ありがとう

4

2 に答える 2

1

やりたいことには、テーブルのhtmlレイアウトを使用する必要があると思います。

列を に配置できますが、 CSS プロパティ<table>を使用するのが最もクリーンな方法だと思います。display: table-cell

私はあなたの HTML/CSS コンテンツを自由に編集しました: http://jsfiddle.net/TxeJu/

「コンテンツ」ブロックを左右のブロックの間に移動し、display: table-cellプロパティを追加し、「コンテンツ」ブロックに入れたテーブルを削除しました。

于 2012-08-12T08:25:10.210 に答える
0 
<html>
 <head>
  <style type="text/css">
    html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, img, ol, ul,
    li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
     margin: 0;
     padding: 0;
     border: 0;
     font-size: 100%;
     font: inherit;
     vertical-align: baseline;
     font-family:Segoe UI, sans-serif;
    }
   .header, .container, .footer {
    min-height:100px;
   }
   .header {
    background-color:#757575;
   }
   .container {
       background-color:#cccccc;
   }
   .footer {
    background-color:#757575;   
   }
   .header, .footer, .column {
    text-align:center;
   }
   .column {
    float:left;
    min-width:300px;
    border-left:1px solid blue;
    border-right:1px solid blue;
    margin-left:10px;
   }
  </style>
  <script type="text/javascript">
   function headerContentFooter(headerRatio, footerRatio) {
    totalHeight = document.height;
    headerHeight = 0;
    containerHeight = 0;
    footerHeight = 0;
    if(headerRatio < 0.5 && footerRatio < 0.5) {
     headerHeight = totalHeight * headerRatio;
     footerHeight = totalHeight * footerRatio;
     containerHeight = totalHeight - (headerHeight + footerHeight);
     document.getElementsByClassName("header")[0].style.height = "" + headerHeight + "px";
     document.getElementsByClassName("container")[0].style.height = "" + containerHeight + "px";
     document.getElementsByClassName("footer")[0].style.height = "" + footerHeight + "px";
     document.getElementsByClassName("header")[0].style.minHeight = "" + headerHeight + "px";
     document.getElementsByClassName("container")[0].style.minHeight = "" + containerHeight + "px";
     document.getElementsByClassName("footer")[0].style.minHeight = "" + footerHeight + "px";
     document.getElementsByClassName("header")[0].style.maxHeight = "" + headerHeight + "px";
     document.getElementsByClassName("container")[0].style.maxHeight = "" + containerHeight + "px";
     document.getElementsByClassName("footer")[0].style.maxHeight = "" + footerHeight + "px";
    }
   }
  </script>
 </head>
 <body>
  <div class="header">HEADER</div>
  <div class="container">
   <div class="column">LEFT</div><div class="column">CENTER</div><div class="column">RIGHT</div>
  </div>
  <div class="footer">FOOTER</div>
  <script type="text/javascript">
   headerContentFooter(0.05, 0.05);
  </script>
 </body>
</html>

こんにちは、私はあなたのプロフィールがあなたがおそらくjavascriptの男ではないことを示しているので、上記のコードはあなたの質問への答えではないことを知っています、しかし時々cssは十分ではありません、あなたは現代のブラウザの巨大な強みを利用しようとするべきです、しかしあなたがより少ないなら時間、私たちはあなたを助けることができます。 上記のコードはうまく機能するので、試してみてください

于 2012-08-12T09:37:36.967 に答える