Question

我希望主要内容显示在左侧栏的右侧。无论是固定位置还是其他方式。没关系。虽然，我不想使用绝对定位，因为我需要我的页面根据视口的大小自动格式化自己。此外，无论如何，左栏不会是固定宽度。这将取决于许多事情，并可能在同一会话期间多次更改。所以绝对定位是不可能的。

<div id="header">HEADER</div>
<div id="left_bar">Left Bar of Wonderfulness</div>
<div id="main_content">
    <p>I want this content to be displayed right around <b>here</b>. So it doesn't scroll behind "Left Bar of Wonderfulness".</p>

<p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p>             <p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p>
</div>

#header{font-size:20vw;}
#left_bar{float:left;position:fixed;}
#main_content{overflow:auto;}

http://jsfiddle.net/QLADJ/

你知道吗，我之前问了一个问题，并得到了类似的答复。 Downvoted和答案完全与我的问题无关。这真的不是给我一个关于这个地方的好印象，我不喜欢问你们任何人。如果你真的关心你想要利用的网站，你应该尝试帮助它上面的人，而不是攻击他们。 -.-

Answer 1

以下是Working Fiddle 经过测试： IE10，IE9，IE8，FF，Chrome，Safari

注意：虽然我使用绝对定位，但这种布局完全响应。（调整浏览器大小以查看其运行情况）

此解决方案仍有缺点：左侧菜单宽度和主要内容宽度是固定的。（我会尝试补救并更新我的答案）

<强> HTML：

<div id="Site">
    <div id="header">HEADER</div>
    <div id="content">
        <div id="left_bar">Left Bar of Wonderfulness</div>
        <div id="main_content">
            <p>I want this content to be displayed right around <b>here</b>. So it doesn't scroll behind "Left Bar of Wonderfulness". Though, I don't want to use absolute positioning because I need my page to automatically format itself based on the size of the viewport. Also, the Left Bar isn't going to be a fixed width anyway. That'll be dependant on a number of things and may change multiple times during the same session. So absolute positioning is out of the question.</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
        </div>
    </div>
</div>

<强> CSS：

*
{
    padding: 0;
    margin: 0;
}
html, body
{
    height: 100%;
}

#Site
{
    height: 100%;
}
    #Site:before
    {
        content: '';
        height: 100%;
        float: left;
    }

#header
{
    text-align: center;
    font-size: 10vw;
}
#content
{
    background-color: azure;
    position: relative;
}
    #content:after
    {
        content: '';
        display: block;
        clear: both;
    }
#left_bar
{
    width: 30%;
}
#main_content
{
    position: absolute;
    height: 100%;
    width: 70%;
    top: 0;
    right: 0;
    background-color: red;
    overflow: auto;
}

更新：您的问题不是那么清楚，但我认为我现在理解正确了。以下是Updated Fiddle 测试： IE10，IE9，IE8，Chrome，FF，Safari

诀窍是将左侧菜单内容加倍，其中一个（假的） - 是隐藏的，但它在那里采取“空间”，真正的一个是固定的。

<强> HTML：

<div id="Header">HEADER</div>
<div id="LeftMenuContainer">
    <div id="RealLeftMenu">Your left menu content</div>
    <div id="FakeLeftMenu">Your left menu content</div>
</div>
<div id="MainContent">
    Your content
</div>

<强> CSS：

*
{
    padding: 0;
    margin: 0;
}

#Header
{
    text-align: center;
    font-size: 5em;
}
#LeftMenuContainer
{
    display: table-cell;
    white-space: nowrap;
}

#MainContent
{
    display: table-cell;
    background-color: red;
}

#FakeLeftMenu
{
    visibility: hidden;
}
#RealLeftMenu
{
    position: fixed;
    background-color: blanchedalmond;
}

相对于固定位置div的位置？

1 个答案: