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

テーブルはmin-heightでは機能しません。

#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 に答える