固定寬度和全寬度的可重複使用的包裝頁面

我有一個封裝對於我的所有網頁都是固定寬度，但是如果我有一個內容需要具有完整寬度的網頁（例如幻燈片），該怎麼辦。固定寬度和全寬度的可重複使用的包裝頁面

HTML

<div id="wrapper"> 
//fixed width contents 
</div>

CSS

#wrapper{ 
width: 960px; 
margin: 0 auto; 
}

我不想再創建一個包裝與全寬，如：

CSS

#wrapper-full-width{ 
width: 100% 
}

HTML

<div id='wrapper-full-width'> 
// some contents with full width like slideshow 
</div>

所以我只需要一個包裝，我可以用我的所有網頁。

首頁

<div id="wrapper"> 
<div id="header"></div> 

<div id="slideshow> // fixed width=960px</div> 

<div id="footer"></div> 
</div>

產品頁面

<div id="wrapper"> 
<div id="header"></div> 

<div id="slideshow"> // full width=100% </div> 

<div id="footer"></div> 
</div>

我如何可以使用與需要有一個完整寬度的網頁內容相同的包裝？

來源

2014-02-27 Defyleiti

是否可以在需要全寬幻燈片顯示的頁面上向'div＃slideshow'或'div＃wrapper'添加一個類？因爲你不能在CSS –

嗯，有兩個可選：要麼一類fullwidth添加到包裝本身或特定頁面上的<body>標籤：

<div id="wrapper" class="fullwidth"> 
    <div id="header"></div> 
    <div id="slideshow"></div> 
    <div id="footer"></div> 
</div>

#wrapper.fullwidth { width: 100%; }

或者：

<body class="fullwidth"> 
    <div id="wrapper"> 
     <div id="header"></div> 
     <div id="slideshow"></div> 
     <div id="footer"></div> 
    </div> 
</body>

.fullwidth #wrapper { width: 100%; }

來源

2014-02-27 11:45:23

中選擇基於「頁面」的元素（例如url），所以第一個選項看起來不錯，所以我想我會使用那個。 – Defyleiti

固定寬度和全寬度的可重複使用的包裝頁面

回答

相關問題