對準我有一個頁眉，頁腳和主網站上的內容。目前，他們擁有汽車的利潤和都是相同的寬度，使他們都一起中心網頁上很好。添加一個側邊欄不改變主要內容
在某些但不是網站上的所有網頁，我希望有一個側邊欄旁邊的主要內容出現。我想主要的內容仍然可以用頁眉和頁腳，一切都對準保持相同的寬度，但出現的主要內容右邊的側欄。換句話說，當沒有邊欄時，其他所有內容應儘可能相似。 因此，與側邊欄應該是這樣的：
|HEADER |
|CONTENT| |SB|
|CONTENT| |SB|
|CONTENT|
|FOOTER |
而且沒有側邊欄：
|HEADER |
|CONTENT|
|CONTENT|
|CONTENT|
|FOOTER |
有沒有一種簡單的方法用CSS來做到這一點？
給邊欄position屬性和下列值之一：
- 固定
- 相對
- 絕對
和z-index: 1（或更高的值）。這將使邊欄脫離正常的「流程」（技術上relative除外）。
參考文獻
回顧片段在整頁模式，更好的視野（儘管在演示響應所以還是功能一個較小的視口）。點擊紅色切換按鈕。更多細節在下面的代碼段中進行了評論。
SNIPPET 1
// This is not required; it's for demonstration
var toggle = document.getElementById('sideToggle');
toggle.addEventListener('click', function(event) {
var sidebar = document.querySelector('aside');
sidebar.classList.toggle('off');
}, false);* {
border-width: 1px;
border-style: solid;
border-color: black;
background: rgba(0, 0, 0, .2);
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
font: 400 16px/1.45 Arial;
height: 100%;
width: 100%;
border-color: lime;
}
ul {
list-style: none;
}
header {
border-color: #fff;
}
main {
width: 70vw;
padding: 3em 5vw;
border: 5px dotted blue;
margin: 0 auto;
}
article {
padding: 1em 2em;
border-color: salmon;
}
p {
border-color: transparent;
font-size: 1rem;
}
a {
background: yellow;
}
/* Demo */
#sideToggle {
float: right;
font: inherit;
background: red;
color: white;
cursor: pointer;
margin-right: 4em;
}
/* Required styles are preceded by ✎ */
#sidebar {
/* ✎ Use absolute or relative if "sticky"
|| behavior is not desired. Relative
|| will poisition itself relative to it's
|| original position. Absolute will
|| position itself in relation to the
|| nearest positioned element, so it's
|| easier to use relative since you'll
|| need another positioned element to
|| position the sidebar. See reference
|| for more details.
*/
position: fixed;
/* ✎ See reference */
z-index: 1;
/* ✎ See reference */
top: calc(50vh - 35px);
/* ✎ See reference */
right: 0;
width: 20vw;
height: auto;
min-height: 70px;
border: dashed red;
background: rgba(255, 255, 255, .2);
}
/* Demo */
.off {
display: none;
}<!doctype html>
<html>
<head>
<meta charset='utf-8'>
</head>
<body>
<header>
<button id='sideToggle'>Toggle</button>
<hgroup>
<h1>H1 Title</h1>
<h2>H2 Title</h2>
</hgroup>
<nav>
<a href='#sec1'>Section 1</a>
<a href='#sec2'>Section 2</a>
<a href='#sec3'>Section 3</a>
</nav>
</header>
<main>
<!--BEGIN SIDEBAR-->
<aside id='sidebar'>
<h3>Sidebar</h3>
<nav>
<ul>
<li><a href='#' target='_self'>Home Page</a>
</li>
<li><a href='http://example.com'>External Site</a>
</li>
<li><a href='#/'>Site Directory</a>
</li>
</ul>
</nav>
</aside>
<!--END SIDEBAR-->
<section id='sec1'>
<article>
<p>
Chaugnar Faugn ph'grah'n Chaugnar Faugn wgah'n r'luh y-nglui Cthulhu ch', Nyarlathotep gotha mg hrii nog Nyarlathotep, llll goka uln uh'eagl Cthulhu sll'ha. Ph's'uhn Yoggoth Dagon gnaiih geb ebunma kadishtu n'ghft, nnnkadishtu Shub-Niggurath shtunggli
nglui nnnuln tharanak ooboshu, ehyeog nnnHastur ya ep y-Chaugnar Faugn nogyar. Mg gotha Dagon naflr'luh f'ilyaa ftaghu s'uhn ooboshu f'ah Dagon, ehye athg fhtagnyar uaaah gnaiih phlegeth ah stell'bsna ngAzathoth, uln h''bthnk uaaahoth Cthulhu
llll ngnglui bug y'hahor. Llll orr'eyar gof'nn Tsathoggua naflhrii Cthulhu shogg vulgtm naflkn'a lw'nafh nnnn'ghft, zhro ngn'ghft f'shogg r'luh f'Nyarlathotep chtenff bug syha'h naflchtenff naflkadishtu, cvulgtlagln stell'bsna zhro natharanak
uaaah throd 'bthnk ngebunma bug.
</p>
<p>
Wgah'n shogg hafh'drn ep y'hah kn'aoth ngtharanak shtunggli ee zhro wgah'n r'luh, nw ilyaa vulgtm zhro wgah'n k'yarnak ftaghu uaaah uln stell'bsnaog. Fm'latgh gotha f'stell'bsna stell'bsna y-uln gotha kadishtuagl gnaiih, Dagon h'chtenff sll'ha bug mg
hupadgh cuh'e s'uhn, ah ebunma uaaah lloig y'hah Cthulhu. Uln ah wgah'n gof'nn ph'Azathoth hupadgh y-shogg, gof'nn ngn'gha kn'a ilyaa kadishtu, nanw fhtagn ah gotha mnahn'. Nghupadgh shtunggliagl n'gha czhro Yoggothog naflathg mg ch'or ehye
vulgtlagln f's'uhn f'llll, ph'grah'n f'lw'nafh fm'latgh y'hah lw'nafhnyth ph'Azathoth nw Tsathoggua Cthulhu wgah'n, 'ai fm'latgh stell'bsna naflnglui naYoggoth 'aioth kadishtu nog r'luh f'ebunma.
</p>
<p>
Sgn'wahl naflHastur sll'ha nnntharanak kn'a li'hee y-fhtagn, hupadgh bug y'hah Yoggoth Azathoth nw, orr'e y'hah stell'bsna f'syha'h syha'h. Naflooboshu k'yarnak shagg Shub-Niggurath shagg llll f'shugg nagnaiih, sgn'wahl s'uhn y'hah grah'n nasll'ha zhro
cnilgh'ri hafh'drn, fm'latghyar ngsll'ha lw'nafh Azathoth llll cgof'nn. R'lyehog ch' y-mg gnaiih ngnw hrii vulgtm hai, athg naflhrii n'gha goka hrii uh'e, wgah'n ebunma uaaah s'uhn tharanak 'fhalma. 'bthnkor Dagon ph'llll fhtagn uh'e Dagon gnaiih
f'shagg hafh'drn 'fhalma, vulgtlagln f'bug hai 'fhalma 'ai y'hahagl h'syha'h ya naflshagg llll, Chaugnar Faugn k'yarnak orr'e ph'gnaiih ph'nw tharanak ph'nglui ilyaa.
</p>
<p>
Sll'haagl vulgtlagln uh'eog nnnmnahn' h'llll Shub-Niggurath ngthrod wgah'n ronyar hrii, h''ai tharanak zhro 'ai bug nachtenff ngluiog. Ebunma n'ghft chtenff gof'nn Dagon ron ilyaa hupadghoth, ep stell'bsna Shub-Niggurath nglui h'vulgtlagln phlegeth hupadgh
li'hee, zhro Cthulhu uaaah vulgtlagln ee phlegeth. Nalw'nafh sgn'wahl kn'a chupadgh hrii ph'wgah'n grah'n f'n'gha Shub-Niggurathyar, 'fhalma nog ch' sgn'wahl Azathoth throd gotha n'gha, hafh'drn cs'uhn throd cshugg phlegeth s'uhn shtunggli.
Fhtagn Cthulhu Azathothor Cthulhu Nyarlathotep ebunmaoth nafluln 'fhalma hai ngah, Azathoth shtunggli ch'agl f'nw naathg bug shagg nog Tsathoggua cgotha, nabug shtunggli mg ilyaa Dagon hafh'drn r'luh ep.
</p>
<p>
Chaugnar Faugn gothaoth Nyarlathotep ron ep athg 'bthnk s'uhn phlegeth chai, syha'h sll'ha ph'Dagon f'nilgh'ri Chaugnar Faugn n'gha hlirghyar nglui, kn'a n'gha shagg hrii ebunma Tsathogguayar nnngoka f'nw. Geb orr'e kadishtu chtenffor shtunggli h'nog
chtenffagl hrii gnaiih uln, fhtagn chtenff orr'eagl uln chtenff n'ghanyth hafh'drn ebunma Tsathoggua sll'ha, ron y-Yoggoth Cthulhu vulgtm uln ngR'lyeh Cthulhu ngehye. Y'hah bugyar wgah'n Azathoth zhro shtunggli f'shugg f'ftaghu ngathg geb shtunggli
nachtenff naflli'hee, phlegeth Dagon n'gha ebunma throd r'luh gotha ngah sll'ha nglui. Lw'nafh ph'geb kn'a uln naYoggoth ebunma r'luh phlegeth Cthulhu ehye corr'e 'ai, Tsathoggua shagg ron f'nglui shagg li'hee goka wgah'n y-r'luh orr'e stell'bsna,
nogog ngCthulhu mg nglui shugg fm'latgh h'hai hupadgh goka llll.
</p>
<p>
S'uhn ee chtenff y-stell'bsna y-sgn'wahl athg hlirgh cAzathoth, Nyarlathotep Tsathoggua ebunma orr'e vulgtm Hastur, phlegethagl naflnog athg 'fhalma throd mnahn'.
</p>
</article>
</section>
<section id='sec2'>
<article>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided
by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.</p>
<p>His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought. It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between
its four familiar walls.</p>
<p>A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted
out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer.</p>
<p>Gregor then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him feel quite sad. "How about if I sleep a little bit longer and forget all this nonsense", he thought, but that was something
he was unable to do because he was used to sleeping on his right, and in his present state couldn't get into that position. However hard he threw himself onto his right, he always rolled back to where he was.</p>
<p>He must have tried it a hundred times, shut his eyes so that he wouldn't have to look at the floundering legs, and only stopped when he began to feel a mild, dull pain there that he had never felt before. "Oh, God", he thought, "what a strenuous
career it is that I've chosen! Travelling day in and day out. Doing business like this takes much more effort than doing your own business at home, and on top of that there's the curse of travelling, worries about making train connections, bad
and irregular food, contact with different people all the time so that you can never get to know anyone or become friendly with them. It can all go to Hell! " He felt a slight itch</p>
</article>
</section>
<section id='sec3'>
<article>
<p>"Lost by a whale! Young man, come nearer to me: it was devoured, chewed up, crunched by the monstrousest parmacetty that ever chipped a boat!—ah, ah!"</p>
<p>I was a little alarmed by his energy, perhaps also a little touched at the hearty grief in his concluding exclamation, but said as calmly as I could, "What you say is no doubt true enough, sir; but how could I know there was any peculiar ferocity
in that particular whale, though indeed I might have inferred as much from the simple fact of the accident."</p>
<p>"Look ye now, young man, thy lungs are a sort of soft, d'ye see; thou dost not talk shark a bit. SURE, ye've been to sea before now; sure of that?"</p>
<p>"Sir," said I, "I thought I told you that I had been four voyages in the merchant—"</p>
<p>"Hard down out of that! Mind what I said about the marchant service—don't aggravate me—I won't have it. But let us understand each other. I have given thee a hint about what whaling is; do ye yet feel inclined for it?"</p>
</article>
</section>
</main>
<footer>
<nav>
<a href='#sec1'>Section 1</a>
<a href='#sec2'>Section 2</a>
<a href='#sec3'>Section 3</a>
</nav>
</footer>
</body>
</html>SNIPPET 2
// This is not required; it's for demonstration
var toggle = document.getElementById('sideToggle');
var expand = document.getElementById('expand');
var reduce = document.getElementById('reduce');
var counter = 0;
toggle.addEventListener('click', function(event) {
var sidebar = document.querySelector('aside');
sidebar.classList.toggle('off');
}, false);
expand.addEventListener('click', function(event) {
var sec1 = document.querySelector('#sec1');
counter += 5;
sec1.style.marginLeft = counter + 'px';
sec1.style.marginRight = counter + 'px';
}, false);
reduce.addEventListener('click', function(event) {
var sec1 = document.querySelector('#sec1');
counter -= 5;
sec1.style.marginLeft = counter + 'px';
sec1.style.marginRight = counter + 'px';
}, false);* {
border-width: 1px;
border-style: solid;
border-color: black;
background: rgba(0, 0, 0, .2);
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
font: 400 16px/1.45 Arial;
height: 100%;
width: 100%;
border-color: lime;
}
ul {
list-style: none;
}
header {
border-color: #fff;
}
main {
width: 70vw;
padding: 3em 5vw;
border: 5px dotted blue;
margin: 0 auto;
box-sizing: content-box;
}
article {
padding: 1em 2em;
border-color: salmon;
}
p {
border-color: transparent;
font-size: 1rem;
}
a {
background: yellow;
}
/* Demo */
#sideToggle,
#expand,
#reduce {
float: right;
font: inherit;
background: red;
color: white;
cursor: pointer;
margin-right: 4em;
}
/* Required styles are preceded by ✎ */
/* Styles that have been changed are preceded by ✦ */
#sidebar {
/* ✎ Use absolute or relative if "sticky"
|| behavior is not desired. Relative
|| will position itself relative to it's
|| original position. Absolute will
|| position itself in relation to the
|| nearest positioned element, so it's
|| easier to use relative since you'll
|| need another positioned element to
|| position the sidebar. See reference
|| for more details.
*/
/* ✦ */
position: absolute;
/* ✎ See reference */
z-index: 1;
/* ✦ See reference */
top: 2%;
/* ✦ See reference */
right: -20vw;
width: 20vw;
height: auto;
min-height: 70px;
border: dashed red;
background: rgba(255, 255, 255, .2);
}
.off {
display: none;
}
section {
/* ✦ */
box-sizing: content-box;
/* ✦ */
position: relative;
/* ✦ */
width: 100%;
}<!doctype html>
<html>
<head>
<meta charset='utf-8'>
</head>
<body>
<header>
<button id='expand'>Expand</button>
<button id='reduce'>Reduce</button>
<button id='sideToggle'>Toggle</button>
<hgroup>
<h1>H1 Title</h1>
<h2>H2 Title</h2>
</hgroup>
<nav>
<a href='#sec1'>Section 1</a>
<a href='#sec2'>Section 2</a>
<a href='#sec3'>Section 3</a>
</nav>
</header>
<main id='main'>
<!--SIDEBAR IS MOVED INTO #SEC1-->
<section id='sec1'>
<!--BEGIN SIDEBAR-->
<aside id='sidebar'>
<h3>Sidebar</h3>
<nav>
<ul>
<li><a href='#' target='_self'>Home Page</a>
</li>
<li><a href='http://example.com'>External Site</a>
</li>
<li><a href='#/'>Site Directory</a>
</li>
</ul>
</nav>
</aside>
<!--END SIDEBAR-->
<article>
<p>
Chaugnar Faugn ph'grah'n Chaugnar Faugn wgah'n r'luh y-nglui Cthulhu ch', Nyarlathotep gotha mg hrii nog Nyarlathotep, llll goka uln uh'eagl Cthulhu sll'ha. Ph's'uhn Yoggoth Dagon gnaiih geb ebunma kadishtu n'ghft, nnnkadishtu Shub-Niggurath shtunggli
nglui nnnuln tharanak ooboshu, ehyeog nnnHastur ya ep y-Chaugnar Faugn nogyar. Mg gotha Dagon naflr'luh f'ilyaa ftaghu s'uhn ooboshu f'ah Dagon, ehye athg fhtagnyar uaaah gnaiih phlegeth ah stell'bsna ngAzathoth, uln h''bthnk uaaahoth Cthulhu
llll ngnglui bug y'hahor. Llll orr'eyar gof'nn Tsathoggua naflhrii Cthulhu shogg vulgtm naflkn'a lw'nafh nnnn'ghft, zhro ngn'ghft f'shogg r'luh f'Nyarlathotep chtenff bug syha'h naflchtenff naflkadishtu, cvulgtlagln stell'bsna zhro natharanak
uaaah throd 'bthnk ngebunma bug.
</p>
<p>
Wgah'n shogg hafh'drn ep y'hah kn'aoth ngtharanak shtunggli ee zhro wgah'n r'luh, nw ilyaa vulgtm zhro wgah'n k'yarnak ftaghu uaaah uln stell'bsnaog. Fm'latgh gotha f'stell'bsna stell'bsna y-uln gotha kadishtuagl gnaiih, Dagon h'chtenff sll'ha bug mg
hupadgh cuh'e s'uhn, ah ebunma uaaah lloig y'hah Cthulhu. Uln ah wgah'n gof'nn ph'Azathoth hupadgh y-shogg, gof'nn ngn'gha kn'a ilyaa kadishtu, nanw fhtagn ah gotha mnahn'. Nghupadgh shtunggliagl n'gha czhro Yoggothog naflathg mg ch'or ehye
vulgtlagln f's'uhn f'llll, ph'grah'n f'lw'nafh fm'latgh y'hah lw'nafhnyth ph'Azathoth nw Tsathoggua Cthulhu wgah'n, 'ai fm'latgh stell'bsna naflnglui naYoggoth 'aioth kadishtu nog r'luh f'ebunma.
</p>
<p>
Sgn'wahl naflHastur sll'ha nnntharanak kn'a li'hee y-fhtagn, hupadgh bug y'hah Yoggoth Azathoth nw, orr'e y'hah stell'bsna f'syha'h syha'h. Naflooboshu k'yarnak shagg Shub-Niggurath shagg llll f'shugg nagnaiih, sgn'wahl s'uhn y'hah grah'n nasll'ha zhro
cnilgh'ri hafh'drn, fm'latghyar ngsll'ha lw'nafh Azathoth llll cgof'nn. R'lyehog ch' y-mg gnaiih ngnw hrii vulgtm hai, athg naflhrii n'gha goka hrii uh'e, wgah'n ebunma uaaah s'uhn tharanak 'fhalma. 'bthnkor Dagon ph'llll fhtagn uh'e Dagon gnaiih
f'shagg hafh'drn 'fhalma, vulgtlagln f'bug hai 'fhalma 'ai y'hahagl h'syha'h ya naflshagg llll, Chaugnar Faugn k'yarnak orr'e ph'gnaiih ph'nw tharanak ph'nglui ilyaa.
</p>
<p>
Sll'haagl vulgtlagln uh'eog nnnmnahn' h'llll Shub-Niggurath ngthrod wgah'n ronyar hrii, h''ai tharanak zhro 'ai bug nachtenff ngluiog. Ebunma n'ghft chtenff gof'nn Dagon ron ilyaa hupadghoth, ep stell'bsna Shub-Niggurath nglui h'vulgtlagln phlegeth hupadgh
li'hee, zhro Cthulhu uaaah vulgtlagln ee phlegeth. Nalw'nafh sgn'wahl kn'a chupadgh hrii ph'wgah'n grah'n f'n'gha Shub-Niggurathyar, 'fhalma nog ch' sgn'wahl Azathoth throd gotha n'gha, hafh'drn cs'uhn throd cshugg phlegeth s'uhn shtunggli.
Fhtagn Cthulhu Azathothor Cthulhu Nyarlathotep ebunmaoth nafluln 'fhalma hai ngah, Azathoth shtunggli ch'agl f'nw naathg bug shagg nog Tsathoggua cgotha, nabug shtunggli mg ilyaa Dagon hafh'drn r'luh ep.
</p>
<p>
Chaugnar Faugn gothaoth Nyarlathotep ron ep athg 'bthnk s'uhn phlegeth chai, syha'h sll'ha ph'Dagon f'nilgh'ri Chaugnar Faugn n'gha hlirghyar nglui, kn'a n'gha shagg hrii ebunma Tsathogguayar nnngoka f'nw. Geb orr'e kadishtu chtenffor shtunggli h'nog
chtenffagl hrii gnaiih uln, fhtagn chtenff orr'eagl uln chtenff n'ghanyth hafh'drn ebunma Tsathoggua sll'ha, ron y-Yoggoth Cthulhu vulgtm uln ngR'lyeh Cthulhu ngehye. Y'hah bugyar wgah'n Azathoth zhro shtunggli f'shugg f'ftaghu ngathg geb shtunggli
nachtenff naflli'hee, phlegeth Dagon n'gha ebunma throd r'luh gotha ngah sll'ha nglui. Lw'nafh ph'geb kn'a uln naYoggoth ebunma r'luh phlegeth Cthulhu ehye corr'e 'ai, Tsathoggua shagg ron f'nglui shagg li'hee goka wgah'n y-r'luh orr'e stell'bsna,
nogog ngCthulhu mg nglui shugg fm'latgh h'hai hupadgh goka llll.
</p>
<p>
S'uhn ee chtenff y-stell'bsna y-sgn'wahl athg hlirgh cAzathoth, Nyarlathotep Tsathoggua ebunma orr'e vulgtm Hastur, phlegethagl naflnog athg 'fhalma throd mnahn'.
</p>
</article>
</section>
<section id='sec2'>
<article>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided
by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.</p>
<p>His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought. It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between
its four familiar walls.</p>
<p>A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted
out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer.</p>
<p>Gregor then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him feel quite sad. "How about if I sleep a little bit longer and forget all this nonsense", he thought, but that was something
he was unable to do because he was used to sleeping on his right, and in his present state couldn't get into that position. However hard he threw himself onto his right, he always rolled back to where he was.</p>
<p>He must have tried it a hundred times, shut his eyes so that he wouldn't have to look at the floundering legs, and only stopped when he began to feel a mild, dull pain there that he had never felt before. "Oh, God", he thought, "what a strenuous
career it is that I've chosen! Travelling day in and day out. Doing business like this takes much more effort than doing your own business at home, and on top of that there's the curse of travelling, worries about making train connections, bad
and irregular food, contact with different people all the time so that you can never get to know anyone or become friendly with them. It can all go to Hell! " He felt a slight itch</p>
</article>
</section>
<section id='sec3'>
<article>
<p>"Lost by a whale! Young man, come nearer to me: it was devoured, chewed up, crunched by the monstrousest parmacetty that ever chipped a boat!—ah, ah!"</p>
<p>I was a little alarmed by his energy, perhaps also a little touched at the hearty grief in his concluding exclamation, but said as calmly as I could, "What you say is no doubt true enough, sir; but how could I know there was any peculiar ferocity
in that particular whale, though indeed I might have inferred as much from the simple fact of the accident."</p>
<p>"Look ye now, young man, thy lungs are a sort of soft, d'ye see; thou dost not talk shark a bit. SURE, ye've been to sea before now; sure of that?"</p>
<p>"Sir," said I, "I thought I told you that I had been four voyages in the merchant—"</p>
<p>"Hard down out of that! Mind what I said about the marchant service—don't aggravate me—I won't have it. But let us understand each other. I have given thee a hint about what whaling is; do ye yet feel inclined for it?"</p>
</article>
</section>
</main>
<footer>
<nav>
<a href='#sec1'>Section 1</a>
<a href='#sec2'>Section 2</a>
<a href='#sec3'>Section 3</a>
</nav>
</footer>
</body>
</html>在主分區的樣式表中開發兩個類。 每當你想與主要沿着側邊欄，使用寬度屬性來定義主，側欄。
，只要你想要的側邊欄的類之間切換。 請參閱下面的代碼。
header, footer {
width: 100%;
text-align: center;
background: #aaa;
padding: 10px 0px;
}
section {
width: 100%;
overflow: auto;
}
section div {
float: left;
}
.only-main, .main-with-sidebar {
height: 200px;
text-align: center;
}
.only-main {
width: 100%;
}
.main-with-sidebar {
width: 70%;
border: 1px solid green;
}
/************ For sidebar ***********/
.sidebar {
width: 29%;
height: 200px;
border: 1px solid red;
}
.hide {
display: none;
}<header>
<h1>Header</h1>
</header>
<section>
<div class="only-main">Main</div>
<div class="sidebar hide">Sidebar</div>
</section>
<section>
<div class="main-with-sidebar">Main</div>
<div class="sidebar">Sidebar</div>
</section>
<footer>Footer</footer>這是好事，但有一種方法，使頁眉/頁腳大小相同主時，有一個側邊欄？另外，理想情況下，添加側邊欄時，Main（和其他部分）不會更改大小 – Kewl
是的，可以完成。您必須使用max-width屬性將佈局約束到所有主要內容（標題，主要和頁腳），然後在佈局外使用側邊欄。 –
我改變了一點點，你可以看看它。 如果要將分欄添加到主分區，則需要將分區寬度設置爲100％，並將主分區設置在中心。
在這裏，我使用絕對定位的側邊欄，所以爲此，我需要把相對位置第一段的風格。
header, footer {
width: 60%;
text-align: center;
background: #aaa;
padding: 10px 0px;
margin: auto;
}
section {
position: relative;
width: 100%;
overflow: auto;
}
section div {
float: left;
}
.only-main, .main-with-sidebar {
height: 200px;
width: 60%;
text-align: center;
margin-left: 20%;
border: 1px solid green;
}
/************ For sidebar ***********/
.sidebar {
position: absolute;
width: 19%;
left: 80%;
height: 200px;
border: 1px solid red;
}
.hide {
display: none;
}<header>
<h1>Header</h1>
</header>
<section>
<div class="only-main">Main</div>
<div class="sidebar hide">Sidebar</div>
</section>
<section>
<div class="main-with-sidebar">Main</div>
<div class="sidebar">Sidebar</div>
</section>
<footer>Footer</footer>
這會工作！但是有沒有辦法讓側欄「擁抱」主要內容而不是視圖的右側？我希望內容與展開時的寬度保持相同，並且邊距增加，因此，如果視圖太小而無法同時顯示內容和側邊欄，並且側邊欄與主內容保持爲利潤率向右增長。 – Kewl
這是一個獨特的佈局。請參閱片段2 – zer00ne