-5

メインコンテンツを左バーの右側に表示したい。それが固定位置であるか、それを行う他の方法があるかどうか。あまり関係ありません。ただし、ビューポートのサイズに基づいてページを自動的にフォーマットする必要があるため、絶対配置は使用したくありません。また、左バーは固定幅にはなりません。それは多くのことに依存し、同じセッション中に複数回変更される可能性があります。したがって、絶対配置は問題外です。

<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/

以前こちらで質問したのですが、似たような回答がありました。反対票を投じ、私の質問とはまったく関係のない回答です。この場所の良い印象を私に与えているわけではありません。利用しようとしているサイトを実際に気にしている場合は、そのサイトにいる人々を攻撃するのではなく、助けるように努めるべきです。-.-

4

1 に答える 1

1

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

更新:あなたの質問はあまり明確ではありませんでしたが、今では正しく理解できたと思います。以下は、IE10、IE9、IE8、Chrome、FF、Safari でテストされた最新の Fiddleです。

トリックは、左のメニュー コンテンツを 2 倍にすることです。そのうちの 1 つ (偽物) は非表示になっていますが、「スペース」を取るためにそこにあり、実際のコンテンツは修正されています。

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;
}
于 2013-09-20T10:57:17.610 に答える