1

在此处输入图像描述

如何在不使用表格的情况下获得图像中显示的内容？我希望布局跨越页面的整个高度/宽度，即使调整了浏览器窗口的大小。

这是我到目前为止所尝试的。它很接近，但看起来并不专业。

<html>
<body>
    <div>
        <div style="border-style: solid; height: 20%">
            Header</div>
        <div style="overflow: hidden; height: 55%">
            <div style="border-style: solid; float: left; width: 20%; height: 100%;">
                left</div>
            <div style="border-style: solid; float: left; width: 57%; height: 100%;">
                content</div>
            <div style="border-style: solid; float: left; width: 20%; height: 100%;">
                right</div>
        </div>
        <div style="border-style: solid; height: 20%">
            Footer</div>
    </div>
</body>
</html>

一个干净简单的 CSS 将不胜感激。

4

4 回答 4

5

Foo，你需要做的是在尝试之前先打好 HTML 和 CSS 的基础。理想情况下，您希望避免使用内联样式（例如style="border: 1px solid black;"）。您不需要固定或绝对定位来完成此操作。使用基本的 HTML/CSS 知识完全可以做到。这是您所要求的替代解决方案：

<div class="header">
    <div class="header-inner"></div>       
</div>
<div class="content">
    <div class="sidebar left">
        <div class="sidebar-inner"></div>
    </div>
    <div class="content-inner"></div>
    <div class="sidebar right">
        <div class="sidebar-inner"></div>
    </div>
</div>
<div class="footer">
    <div class="footer-inner"></div>
</div>

和CSS：

/* Temp styles */
.header, .sidebar, .content, .footer { border: 5px solid black; }
.content, .sidebar, .footer { border-top: none; }
.sidebar.right { border-right: none; }
.sidebar.left { border-left: none; }
/* Core styles */
.header {
    position: relative; /* needed for stacking */
    height: 100px;
    width: 100%;
}
.content {
    position: relative; /* needed for stacking */
    width: 100%;
    height: 500px;
}
.sidebar {
    position: relative; /* needed for stacking */
    width: 20%;
    height: 100%;
    border-top: none;
}
.sidebar.left { float: left; }
.sidebar.left:after,
.sidebar.right:after {
    clear: both;
    content: "\0020";
    display: block;
    overflow: hidden;
}
.sidebar.right { float: right; }
.footer {
    position: relative; /* needed for stacking */
    width: 100%;
    height: 100px;
}

这是一个演示。拿这个演示并从中学习！希望这可以帮助！

于 2013-03-26T02:42:50.477 回答
1

使用position: fixed(ALL) 和top: 0px;(top div) , right: 0px;(right div), left: 0px;(left div), bottom: 0px;(bottom div)

固定职位应该对您有所帮助

编辑：这是代码工作：

    <div>
        <div style="border-style: solid; height: 20%; position: fixed; top: 0px; width: 100%;">
            Header
        </div>
        <div style="overflow: hidden; height: 55%">
            <div style="border-style: solid; float: left; width: 20%; height: 60%; position: fixed; left: 0px; top: 20%;">
                left
            </div>
            <div style="border-style: solid; float: left; width: 55%; height: 60%; position: fixed; top: 20%; left: 20%;">
                content
            </div>
            <div style="border-style: solid; float: right; width: 20%; height: 60%; position: fixed; right: 0px; top: 20%;">
                right
            </div>
        </div>
        <div style="border-style: solid; height: 20%; position: fixed; bottom: 0px; width: 100%;">
            Footer
        </div>
    </div>
于 2013-03-26T02:27:38.190 回答
0

我想你现在已经想出了一个解决方案，因为这个问题已经有将近两年的历史了。但是，其他一些人可能会偶然发现这篇文章，所以这是供将来参考：

看看这个答案并检查 JSFiddles。这是一个使用 CSS 表格（没有 HTML 布局表格）的相对可靠的解决方案。

于 2015-01-29T14:17:47.380 回答
0

CSS：

#header
{
 position:fixed;
 top:0px;
 left:0px;
 right:0px;
 height:20%;
 overflow:hidden;
}
#leftSide
{
 position:fixed;
 top:21%;
 left:0px;
 width:20%;
 bottom:21%;
}
#rightSide
{
 position:fixed;
 top:21%;
 right:0px;
 width:20%;
 bottom:21%;
}
#footer
{
 position:fixed;
 height:20%;
 left:0px;
 right:0px;
 bottom:0px;
}
#content
{
 position:fixed;
 top:21%;
 bottom:21%;
 left:21%;
 width:57%;
}
div {display:block; border:1px solid black;}

html：

<div id="header">header</div>
 <div id="leftSide">left</div>
 <div id="content">content</div>
 <div id="rightSide">right</div>
 <div id="footer">footer</div>

在此示例中，我使用fixed position，但您可以为每个 div设置overflow-x和。overflow-y例如：因为content您可以对每个 div使用overflow-x:hiddenand overflow-y:autoor等​​等。scroll当然，在这个例子中页面是不可滚动的。

于 2014-03-10T20:47:07.300 回答