Question

我很高兴使用alistapart.com中详述的3 column layout。除非有散列网址，否则它完美无缺。因此，我的中心列内容完全显示http://www.jahajee.com/CDC-Renewal-Procedure/7890/1.html，但当网址更改为http://www.jahajee.com/CDC-Renewal-Procedure/7890/1.html#24873时，内容会丢失。

我发现CSS #container .column{padding-bottom:10010px;margin-bottom:-10000px;}是个问题！所述css规则需要使所有3 column具有相等的高度，其中container定义包裹3列。当我删除此条件时，内容将保留在视口中，但列的高度不相等！

相关的CSS

#container{padding-left:200px;padding-right:240px;overflow:hidden;}
#container .column{position:relative;float:left;padding-bottom:10010px;margin-bottom:-10000px;}
#centre{width:100%;padding:10px 20px;}
#left{width:180px;padding:0 10px;right:240px;margin-left:-100%;background:#dfebfd;}
#right{width:180px;padding:0 10px;margin-right:-240px;}

当container overflow:hidden被删除后，内容也会显示，但页面的全长为10000px！

我还尝试按CSS 3 Column Liquid Layout Dynamic Same Height Column中的建议制作container display:table和display:table-cell列，但这些列的高度不相同！

有人可以指导哪些参数可以修改。

Answer 1

此行为似乎是此解决方案的默认行为。请参阅：http://jsfiddle.net/qm3z9p2q/这是alistapart的解决方案，其填充底部，边距底部解决方案使列的高度相等。

使用display：table和display：table-cell是一个完全不同的解决方案。请参阅：http://jsfiddle.net/qm3z9p2q/1/

第三种解决方案是使用边框颜色作为左右列的背景颜色的人造柱。请参阅：http://jsfiddle.net/qm3z9p2q/3/ 这仅在中心列是最高列时才有效。在列之后需要清除元素，请参阅HTML。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Faux columns with border-color</title>
    <style type="text/css">

        /*** The Essential Code ***/

        body {
            min-width: 550px;         /* 2 x LC width + RC width */
        }

        #container {
            border-left: 200px solid #66F;      /* LC width */
            border-right: 150px solid #F66;     /* RC width */
        }

        #container .column {
            position: relative;
            float: left;
        }

        #center {
            width: 100%;
        }

        #left {
            width: 200px;             /* LC width */
            right: 200px;             /* LC width */
            margin-left: -100%;
        }

        #right {
            width: 150px;             /* RC width */
            margin-right: -100%;
        }

        #footer {
            clear: both;
        }

        /*** IE6 Fix ***/
        * html #left {
            left: 150px;              /* RC width */
        }

        /*** Just for Looks ***/

        body {
            margin: 0;
            padding: 0;
            background: #FFF;
        }

        #header, #footer {
            font-size: large;
            text-align: center;
            padding: 0.3em 0;
            background: #999;
        }

        #left {
        }

        #center {
            background: #DDD;

        }

        #right {
        }

        #container .column {
            padding-top: 1em;
            text-align: justify;
        }

        p#i12345 {
                        margin-top:50em;
        }
    </style>
</head>

<body>

    <div id="header">This is the header.</div>

    <div id="container">

        <div id="center" class="column">
            <h1>This is the main content.</h1>

<p><a href="#i12345">jump to ID i12345</a></p>

            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
            <p id="i12345">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
        </div>

        <div id="left" class="column">
            <h2>This is the left sidebar.</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
        </div>

        <div id="right" class="column">
            <h2>This is the right sidebar.</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
        </div>

<div style="clear:both;"></div>

    </div>

    <div id="footer">This is the footer.</div>

</body>

</html>

问候

阿克塞尔

内容在视口上方推送，并在网址中使用哈希

1 个答案: