首頁猿問網(wǎng)頁如何實(shí)現(xiàn)這種布局？

網(wǎng)頁如何實(shí)現(xiàn)這種布局？

JavaScript

慕容708150 2018-08-06 09:09:27

我想達(dá)到下面所述的效果頁面分兩大塊兒，①所指的div寬度固定，高度不固定，居中②所指的div要緊貼著①；并且不隨著頁面的滾動而滾動【或者說②處于瀏覽器窗口固定的位置】；我所不能解決的問題如果對②使用position：fixed，那么當(dāng)瀏覽器窗口不固定的時候，如何才能讓它緊貼著①；或者說②的left或right屬性怎么取值？有想過瀏覽器窗口寬度發(fā)生變化時，用js去調(diào)整②的left或right取值。。。大家有什么技巧來實(shí)現(xiàn)這種效果嗎

查看完整描述

1 回答

阿波羅的戰(zhàn)車

TA貢獻(xiàn)1862條經(jīng)驗(yàn) 獲得超6個贊

<style type="text/css">
    *{ margin:0; padding:0; }    div{ width:1000px; height:auto; background:green; margin:0 auto; position:relative; }    h1{ width:100%; height:200px; }    p{ width:200px; height:200px; background:red;  position:fixed; left:50%; top:50%; margin:-100px 0 0 500px; }</style></head><body><div>
    <h1>1</h1>
    <h1>2</h1>
    <h1>3</h1>
    <h1>1</h1>
    <h1>2</h1>
    <h1>3</h1>
    <h1>1</h1>
    <h1>2</h1>
    <h1>3</h1>
    <h1>1</h1>
    <h1>2</h1>
    <h1>3</h1></div><p></p>

不知道你要是不是這樣，如果你的整體寬度大于1366的話，可能你就要縮小中心的那個板塊寬度，那么久需要用一點(diǎn)JS （還有就是fixed 兼容到IE7，如果你要兼容到IE6就需要用js編輯右邊的板塊在保持在在右邊了）

反對回復(fù) 2018-09-16