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 布局来做你想做的事情。

您可以将列放在 中<table>，但我认为最干净的方法是使用display: table-cellCSS 属性。

我冒昧地编辑了您的 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 回答