框架內的div 100％寬度問題

我在主框架內有兩個div（粉色和灰色）。粉紅色div的固定寬度爲1200px（這是動態的，可以在每個負載上將其更改爲1400px，1800px，2200px或其他），而灰色div的寬度爲100％。當您將框架滾動到右側時，您會注意到灰色條不會100％地到達頁面的末尾。請指導我如何將灰色條100％寬到頁面末尾？框架內的div 100％寬度問題

例子：http://jsfiddle.net/awaises/r3C4B/1/

下面是我的代碼：

<div class="frame"> 
    <div class="header">Page Header</div> 
    <div class="gray-bar">Edit | Delete</div> 
</div> 

.frame{overflow-x: scroll;} 
.header{ 
    border:1px solid black; 
    width:1200px; 
    background:pink; 
    text-align:center; 
    font-size:20px; 
    } 
.gray-bar{ 
    padding: 6px; 
    width:100%; 
    height: 20px; 
    background:#e6e6e5; 
    clear:both; 
    }

來源

2013-12-18 Awais Imran

你的頭太寬，拉伸整個幀。你必須使你的標題100％，而不是一個固定的1200px或給你的灰色條與標題相同的固定寬度

來源

2013-12-18 16:45:07 Godinall

你試圖設置標題標記的寬度在像素和灰色標記在％。它不會工作，因爲在灰色標籤你提到它爲100％，它只能看到窗口的可見部分。如果你想保持相同的寬度變化寬度100％或寬度1200px。參考

"http://jsfiddle.net/sidharthan_r/r3C4B/4/"

來源

2013-12-18 16:45:54 BlackPOP

我想你將不得不增加更多的標記來實現這一目標。

DEMO

裹.header並在容器.gray-bar和改變容器的寬度，而不是.header

<div class="frame"> 
    <div class="wrapper"> 
     <div class="header">Page Header</div> 
     <div class="gray-bar">Edit | Delete</div> 
    </div> 
</div>

.frame{overflow-x: scroll;} 
.header{ 
    border:1px solid black; 
    width:100%; /* THIS BECOMES 100% */ 
    background:pink; 
    text-align:center; 
    font-size:20px; 
    } 
.gray-bar{ 
    padding: 6px; 
    width:100%; 
    height: 20px; 
    background:#e6e6e5; 
    clear:both; 
    } 
.wrapper { 
    width: 1200px; 
}

來源

2013-12-18 16:46:01 Turnip

感謝您的解決方案，但我們可以用包裝寬度100％而不是1200px？我需要一切靈活。請指導...謝謝 –

框架內的div 100％寬度問題

回答

相關問題