对准我有一个页眉，页脚和主网站上的内容。目前，他们拥有汽车的利润和都是相同的宽度，使他们都一起中心网页上很好。添加一个侧边栏不改变主要内容
在某些但不是网站上的所有网页，我希望有一个侧边栏旁边的主要内容出现。我想主要的内容仍然可以用页眉和页脚，一切都对准保持相同的宽度，但出现的主要内容右边的侧栏。换句话说，当没有边栏时，其他所有内容应尽可能相似。 因此，与侧边栏应该是这样的：
|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