我正在使用Bootstrap创建一个学校项目的网站，在我的网站中，背景被切断到我的内容的底部。它应该继续到内容的底部。我无法弄清楚为什么，任何人都可以帮助我吗？ 这是该网站的Dropbox下载链接。对不起，它不在JSFiddle中。 https://www.dropbox.com/s/yndtqv5em7m8fdd/test.zip?dl=0
答案 0 :(得分：0)
更改您的CSS，floats内的问题是.contentpage您需要一个clearfix。
如果父级（contentpage）中包含float个元素，则父级height会自动折叠，因此您需要clearfix来保留父级height。
CSS
.contentpage {
width: 80%;
margin: auto;
background-color: #f9f9f9;
border-left: 20px solid #FF4B3B;
border-right: 20px solid #FF4B3B;
}
.contentpage::after{
content:"";
display:table;
clear:both;
}
希望这会有所帮助..
答案 1 :(得分：0)
首先编辑
h1 {
/* let the bootstrap handle the size */
/*font-size: 3em;*/
}
img {
/*add this*/
width: 100%;
}
你在那里
答案 2 :(得分：0)
试试这段代码：
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Lorem ipsum dolor sit Jeremy's Website</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap theme -->
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles -->
<link href="theme.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="test.css" />
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,800' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=EB+Garamond" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<html>
<body>
<div class="container-fluid" role="main">
<div class="body">
<section class="contentpage" id="page1">
<div class="col-md-12">
<header>
<h1>Summary</h1>
<h2>Subheading placeholder</h2>
</header>
</div>
<div class="col-md-8 col-md-offset-2 bodypg">Quorum eiusmod adipisicing. Arbitror enim iudicem in sed cillum dolor malis
vidisse, velit consequat non firmissimum, occaecat se eiusmod, expetendis iis
fore cernantur, labore praesentibus quibusdam minim mentitum, mandaremus veniam
id consequat efflorescere, commodo tamen dolore incurreret labore. Quorum
efflorescere appellat velit quibusdam, et incididunt philosophari, occaecat an
summis mentitum, offendit illum quamquam ullamco sed ullamco praesentibus non
incurreret quo do legam aliquip, possumus quid ad admodum eruditionem et fugiat
de quamquam do cillum. Offendit ut ingeniis. Aliqua philosophari probant illum
senserit, ad nescius coniunctione, admodum eu eram ne mentitum voluptatibus do
incurreret. A quid despicationes. Aute firmissimum mandaremus quis occaecat,
anim e incurreret sed duis an enim instituendarum aliquip cillum quibusdam, do
fugiat excepteur iudicem, malis incididunt nam dolor multos, senserit sint
ullamco aliquip si pariatur est laboris e mandaremus enim ab singulis
fidelissimae. Offendit dolore offendit ad de legam illum legam cupidatat, se o
eram veniam velit hic magna offendit comprehenderit hic id illum possumus
distinguantur, ex summis probant incididunt a eu aliquip an eiusmod, cupidatat
voluptatibus aut doctrina.<br><br>
</div>
</section>
<section class="contentpage" id="page2">
<div class="col-md-12" >
<header>
<h1>Page 2</h1>
<h2>this is placeholder text</h2>
</header>
</div>
<div class="col-md-8 col-md-offset-2 bodypg">Velit familiaritatem incididunt dolor mandaremus. Aut consequat te occaecat ea
commodo philosophari qui excepteur, do ab illustriora iis qui ex ipsum amet
eram, mandaremus ut cernantur ad malis expetendis a aliquip, mandaremus non elit
ingeniis non a culpa senserit firmissimum. Deserunt relinqueret ita appellat,
ullamco sunt e vidisse praetermissum an velit probant e labore labore, iis
quorum tempor voluptate. Ullamco exquisitaque ut cernantur. Cupidatat est quid
ullamco. Minim ex proident ubi qui esse quis nam incididunt, mentitum velit
consequat expetendis o iis aliquip firmissimum. Esse admodum despicationes,
varias cupidatat te praesentibus si senserit varias id officia imitarentur,
senserit sunt veniam excepteur irure.
</div>
</section>
<section class="contentpage" id="page3">
<div class="col-md-12" >
<header>
<h1>Page 3</h1>
<h2>this is placeholder text</h2>
</header>
</div>
<div class="col-md-8 col-md-offset-2 bodypg">An id exquisitaque, sed irure quis amet ingeniis, ullamco multos vidisse tempor
ea ut magna litteris domesticarum. Incurreret quorum do pariatur concursionibus
qui eiusmod legam o commodo coniunctione non eram excepteur o eruditionem a
noster probant transferrem. Ab iis voluptatibus et dolore graviterque incididunt
sint quibusdam ab ex sunt litteris nostrud est mandaremus ex culpa singulis,
appellat quem incurreret laborum, senserit qui nisi a ne o familiaritatem te
senserit et ingeniis. Tamen ita ad fugiat pariatur o mandaremus noster eram te
minim, quis incididunt iis fugiat quae de o esse se cillum, dolor officia est
exercitation, si proident est iudicem, ad te malis dolore illum hic senserit in
deserunt. Doctrina sint nisi ad dolor, ad est fidelissimae, quid non iudicem, ab
culpa praesentibus, dolor doctrina sed nescius, veniam mandaremus ingeniis,
nostrud culpa deserunt nostrud, ne ita quid nescius. Commodo sunt veniam nam
legam. In sunt de nulla, est excepteur eruditionem, ex esse vidisse consectetur,
non ut minim veniam esse ex admodum quorum eram an tamen, eu ipsum fugiat ut
mandaremus, in cillum singulis offendit, veniam possumus iis vidisse.
</div>
</section>
<section class="contentpage" id="page4">
<div class="col-md-12" >
<header>
<h1>Page 4</h1>
<h2>this is placeholder text</h2>
</header>
</div>
<div class="col-md-8 col-md-offset-2 bodypg">Nulla voluptate do voluptate de sint pariatur si firmissimum, occaecat sed
cupidatat ab do laboris exquisitaque, ubi quorum senserit o mentitum
distinguantur iis laborum, id ubi culpa fugiat cillum ut senserit quis non
deserunt reprehenderit. Iudicem exquisitaque non admodum. Ita magna ex multos.
Non hic velit expetendis ut fabulas id aliquip, tempor fore senserit et tempor
culpa irure a amet. Mentitum qui duis tempor an a nisi ullamco proident. Irure
ex doctrina iis officia ne legam, sunt litteris instituendarum, quid aut
laboris, velit arbitrantur excepteur quae ullamco ut eu dolore veniam duis
quibusdam, a cillum eram quorum singulis iis quem o nescius iis ipsum. Consequat
de nisi.
</div>
</section>
<section class="contentpage" id="page5">
<div class="col-md-12" >
<header>
<h1>Page 5</h1>
<h2>this is placeholder text</h2>
</header>
</div>
<div class="col-md-8 col-md-offset-2 bodypg">Nulla senserit ab ipsum illum ut voluptate noster tamen in esse. Cillum pariatur
litteris. Nam magna officia. Velit an excepteur ea magna. Ingeniis anim o
quibusdam consectetur. Eu quorum deserunt. Velit expetendis hic commodo,
singulis distinguantur ita tempor, e ne enim velit ipsum de o legam singulis
graviterque, e quis aute malis admodum a quid mentitum efflorescere, commodo
familiaritatem se litteris sed eu quem aliqua se deserunt. Arbitror aute
appellat aut nam nam veniam fugiat esse in tempor fugiat iis nostrud
sempiternum, labore o proident in quem hic se multos iudicem praetermissum qui
tamen concursionibus aliquip labore quibusdam a noster imitarentur senserit
fugiat excepteur ita qui summis nescius appellat.<br><br>
<div class="text-justify fancy">
<div class="blockquote">In a series of experiments on small numbers of gamers (10 to 14 people in each study), the researchers reported that gamers with previous experience of playing such action video games were better at perceptual tasks such as pattern discrimination than gamers with less experience.<br>
In another experiment, they trained gamers that had little previous experience of playing action games, giving them 50 hours practice. It was showed that these gamers performed much better on perceptual tasks than they had prior to their training. </div>
<footer>~ Mark Griffiths, The Conversation <a href="http://theconversation.com/playing-video-games-is-good-for-your-brain-heres-how-34034">(source)</a></footer>
</div><br>
<strong>Survey results:</strong><br>
Excepteur et aliqua quibusdam ne qui legam doctrina transferrem. Enim pariatur
ne labore quae ubi amet commodo singulis. Legam expetendis est multos quid, de
duis arbitrantur de et ita legam quae sint, dolor singulis ubi proident. Si hic
consectetur, laborum illum occaecat admodum. Enim cupidatat eruditionem sed
ingeniis aliqua aliqua senserit duis id labore si litteris si duis tractavissent
laborum amet nescius. Anim occaecat ex iudicem an si nulla tamen eu ullamco,
enim singulis iis instituendarum, ut nostrud qui nescius, nostrud aliqua ea
laboris graviterque, hic cillum voluptate laborum o ubi quid arbitror, ne quae
quamquam. Do proident ne incurreret. Dolor domesticarum consequat enim quibusdam te culpa
mandaremus litteris. Irure appellat aut incurreret, ubi admodum philosophari a
tempor quo fore excepteur de varias cernantur imitarentur. Velit imitarentur
mandaremus labore excepteur. Excepteur labore occaecat. Fore ea si tamen
probant, eiusmod irure a mandaremus transferrem. Eram a mentitum et elit, in
veniam ne multos.<br><br>
<strong>One short answer question in my survey was "Why do you think playing games makes your marks worse/better?"<br>Following are some student responses.</strong><br><br>
<img src="img/piemarks.png">
<div class="text-justify fancy"><div class="opinion">Opinion: Worsens</div>
<div class="blockquote">I don't necessarily think that my personal activities affect my schoolwork, but if you play too much, preventing completion of schoolwork and revision, and importantly omitting proper sleep if staying up late, it becomes a problem. So controlled playing hours must happen. </div>
</div>
<br><br>
<div class="text-justify fancy"><div class="opinion">Opinion: Improves</div>
<div class="blockquote">Yes </div>
</div>
<br><br>
<div class="text-justify fancy"><div class="opinion">Opinion: Worsens</div>
<div class="blockquote">In the right amount it's fine, even good. But playing a lot will distract from school work, which is something that definitely does improve your marks.</div>
</div>
<br><br>
<div class="text-justify fancy"><div class="opinion">Opinion: Improves</div>
<div class="blockquote">It can depending what type of game you play. Usually puzzle games can improve them the most.</div>
</div>
<br><br>
<div class="text-justify fancy"><div class="opinion">Opinion: Worsens</div>
<div class="blockquote">It is very addictive, and in my opinion, there is infinite amount of study that could be done, and playing is just completely wasting the limited amount of time I have. </div>
</div>
<br><br>
<div class="text-justify fancy"><div class="opinion">Opinion: Improves</div>
<div class="blockquote">I believe the strategy involved when playing video games is a good way to train your brain to be able to make quick descions.</div>
</div>
<br><br>
<div class="text-justify fancy"><div class="opinion">Opinion: Worsens</div>
<div class="blockquote">It distracts me from doing study/homework</div>
</div>
<br><br>
<div class="text-justify fancy"><div class="opinion">Opinion: Improves</div>
<div class="blockquote">Relieving my stress and tension by having fun and playing games keeps worries off my mind and allows me to focus on school when i need to. As well as certain games improving cognitive functions.</div>
</div>
<br><br>
<div class="text-justify fancy"><div class="opinion">Opinion: Worsens</div>
<div class="blockquote">Well my marks haven't exactly gotten better, have they?</div>
</div>
<br><br>
<div class="text-justify fancy"><div class="opinion">Opinion: Worsens</div>
<div class="blockquote">Takes time out of my possible study time and serves more as a distraction above anything else.</div>
</div>
<br><br>
</div>
<div class="clearfix"></div>
</section>
<section class="contentpage" id="page6">
<div class="col-md-12" >
<header>
<h1>Page 6</h1>
<h2>this is placeholder text</h2>
</header>
</div>
<div class="col-md-8 col-md-offset-2 bodypg">De quo minim culpa enim id dolore familiaritatem mandaremus fore doctrina. Illum
arbitrantur ingeniis malis ingeniis, mentitum aute ex singulis despicationes,
aliquip sed irure ne nam incididunt ab iudicem, id cupidatat est incurreret qui
laboris quorum in tempor exquisitaque, an duis pariatur arbitrantur sed non
eiusmod nam pariatur. Ingeniis duis multos non quem, noster doctrina fabulas ita
appellat varias quae cupidatat legam, e irure probant instituendarum si e
quibusdam tractavissent in cillum cupidatat ne dolor quae et ita tamen varias
qui singulis, offendit legam sint admodum multos. Velit ullamco de
familiaritatem. Incurreret fore nostrud, est si exquisitaque si fugiat
comprehenderit mentitum summis admodum, commodo sunt malis ita cillum, est irure
cernantur illustriora, vidisse de amet quamquam ad quo iudicem sempiternum est
duis deserunt eruditionem. Velit aliquip e consectetur ubi incurreret dolor
dolore quamquam aliqua, cupidatat cohaerescant a ingeniis id consequat nisi
minim non nulla. Arbitror iis occaecat ad anim consequat et incurreret ex iis
cillum voluptatibus hic quem voluptate de minim culpa ut nulla an nescius aut
nisi in consequat quid quem id nisi ea eu laboris de nostrud ad malis excepteur
firmissimum. Incurreret nulla summis qui elit, se labore cupidatat non incididunt noster
eiusmod arbitror ne litteris anim in cupidatat philosophari. Multos illustriora
arbitror magna quamquam sed cernantur e minim. Sed minim velit aute fabulas, o
sunt fore non iudicem ea ex veniam eiusmod admodum ea non qui voluptatibus. Fore
quamquam comprehenderit. Doctrina et eiusmod. Ne anim et anim iis do eram
ingeniis. Minim quamquam nostrud, excepteur nisi quem si labore.
</div>
<div class="clearfix"></div>
</section>
</div>
</div>
<div id="footer">
<div class="logo">
<div class="tagline">
© 2017, Jeremy
</div><br>
<p class="contact">
lorem ipsum
</p>
</div>
</div>
</body>
</html>
答案 3 :(得分：0)
只需将bootstrap类row以及内容页面提供给第6部分，即id="page6"部分。
<section class="contentpage row" id="page6">