如何使用固定在flex佈局中的位置？

左列固定，右列可滾動。

你怎麼能這樣做？

看看下面的代碼：

#parent { 
 
    display: flex; 
 
} 
 
#left { 
 
    flex-grow: 1; 
 
} 
 
#left div { 
 
    position: fixed; 
 
    background: blue; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100vh; 
 
} 
 
#right { 
 
    flex-grow: 5; 
 
    background: red; 
 
    height: 300vh; 
 
}

<div id="parent"> 
 
    <div class="child" id ="left"> 
 
    <div> 
 
     ABC 
 
    </div> 
 
    </div> 
 
    <div class="child" id ="right"> 
 
    DEF 
 
    </div> 
 
</div>

Fiddle

來源

2016-12-31 jonhue

如何撥弄你不正是你描述？ –

@Dan Farrell - 固定div的寬度不是父母的寬度。在代碼中添加了一些細節。 – jonhue

我不認爲你想要什麼是可能的。您必須爲邊欄設置寬度，或者使用JavaScript動態計算寬度。 – sol

如果我理解你的要求，你想要正確的滾動和左側被固定。這可以在不使用固定位置的情況下完成。

我個人建議不要使用固定位置，除非它是絕對必要的，因爲它可能會在移動設備上產生一些不需要的行爲，並且您可能會失去優惠，例如flexbox優惠。

html, body { 
 
    margin: 0; 
 
} 
 
#parent { 
 
    display: flex; 
 
    height: 100vh; 
 
} 
 
#left { 
 
    flex-grow: 1; 
 
    background: blue; 
 
} 
 
#right { 
 
    flex-grow: 5; 
 
    background: red; 
 
    overflow: auto; 
 
} 
 
#right div { 
 
    height: 300vh; 
 
}

<div id="parent"> 
 
    <div class="child" id ="left"> 
 
     ABC 
 
    </div> 
 
    <div class="child" id ="right"> 
 
    <div> 
 
     DEF 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-12-31 18:01:31 LGSon

在這裏你去

#parent { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    display: flex; 
 
    align-items: stretch; 
 
} 
 
#left { 
 
    flex-grow: 1; 
 
    background: lightgray; 
 
} 
 
#right { 
 
    flex-grow: 5; 
 
    background: red; 
 
    overflow-y: auto; 
 
} 
 
.scroll { 
 
    height: 300vw; 
 
}

<div id="parent"> 
 
    <div class="child" id="left"> 
 
    <div> 
 
     ABC 
 
    </div> 
 
    </div> 
 
    <div class="child" id="right"> 
 
    <div class="scroll"> 
 
     DEF 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-12-31 16:30:23

您在評論中寫道：

固定div的寬度是不是父母的寬度。

當添加到position: fixed的元素，從該文件和位置的其相到視正常流動移除。

固定元素沒有理由在HTML結構中識別父元素的寬度。

您可以通過固定整個佈局來達到目的（like in this answer）。否則，您需要一個JavaScript替代方案。

來源

2016-12-31 16:48:04

如何使用固定在flex佈局中的位置？

回答

相關問題