0

我的布局有问题。我想要 3 列：第一列和最后一列小于中央列。

这是 jsfiddle 示例：http: //jsfiddle.net/CL333/

我有这个 HTML

 <body>
<div id="container">
    <table>
        <tr>
            <td id="sinistra">
                <div id="divsinistra">sinistra</div>
            <td id="centro"><div id="divcentro">centro</div>
            <td id="destra"><div id="divdestra">destra</div>
    </table>
</div>
</body>

这个CSS

 html{
height: 100%;
 }
body{
height: 100%;
 }

 #container{
min-height: 100%;
width: 100%;    
 }
 #sinistra{
min-height: 100%;
width: 20%;
border: 1px solid red;
 }
 #centro{
min-height: 100%;
border: 1px solid red;
 }
 #destra{
min-height: 100%;
width: 20%;
border: 1px solid red;
 }
 table, table tr{
width: 100%;
min-height: 100%;
 }
 #divsinistra,#divcentro,#divdestra{
min-height: 100%;
 }

问题是我希望这些列适合页面的整个高度，而以这种方式它们非常小。我不知道还有什么地方可以将另一个高度 100% :( 有人可以帮助我吗？
谢谢！

4

1 回答 1

2

你错误地引用了你的标签

html{
    height: 100%;
}
body{
    height: 100%;
}

并且表格不适用于最小高度。

#container{
    height: 100%;
    width: 100%;    
}

看一下这个

编辑 我也忘了提到你的 html 标签没有正确关闭。

<table>
            <tr>
                <td id="sinistra">
                    <div id="divsinistra">sinistra</div>
                </td>
                <td id="centro"><div id="divcentro">centro</div></td>
                <td id="destra"><div id="divdestra">destra</div></td>
            </tr>
        </table>
于 2013-03-02T11:13:23.927 回答