Question

我在将我的页脚放在底部时遇到问题，但它仍然位于页面的一侧。导航栏和侧栏是固定的。除了导航栏（顶部栏）和页脚之外，一切都在向左浮动。我忘记了什么吗？

enter image description here

以下是代码：

＆＃13;

/* CSS RESET */
    
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    
    /* BODY */
    
    body{
    	color: black;
    	background-color: black;
    }
    
    /* TOP BAR */
    
    div#topbar{
    	background-color: black;
    	position: fixed;
    	width: 100%;
    	height: 50px;
    	top: 0;
    }
    
    #table1{
    	width: 100%;
    }
    	#row1{
    		height: 50px;
    	}
    		#cell11{
    			width: 200px;
    		}
    		#cell12{
    		}
    
    /* SIDE BAR */
    
    div#sidebar{
    	width: 200px;
    	height: 100%;
    	position: fixed;
    	margin-top:	50px;
    	top: 0px;
    }
    
    /* SUBBODY */
    
    div#subbody{
    	max-width: 100%;
    	margin-left: 200px;
    	margin-top: 50px;
    	padding: 30px;
    	float: left;
    }
    
    div#content{
    	padding: 50px;
    	float: left;
    }
    
    div#articleVer{
    
    	max-width: 500px;
    	float: left;
    }
    
    article{
    	padding: 30px;
    	max-width: 500px;
    	float: left;
    }
    
    div#sideContent{
    	padding: 30px;
    	max-width: 150px;
    	float: left;
    	margin-left: 30px;
    }
    
    /* FOOTER */
    
    div#bouchetrou{
    	width: 200px;
    	height: 200px;
    	bottom: 0px;
    	background-color: black;
    }
    
    div#footer{
    	width: 100% auto;
    	height: 200px;
    	bottom: 0px;
    }
    
    /* DEV CLASSES */
    
    .redD{
    	background-color: red;
    }
    
    .pinkD{
    	background-color: pink;
    }
    
    .yellowD{
    	background-color: yellow;
    }
    
    .greenD{
    	background-color: green;
    }
    
    .blueD{
    	background-color: blue;
    }
    
    /* SCROLLBAR */
    
    ::-webkit-scrollbar {
        width: 20px;
    }
    
    /* Track */
    ::-webkit-scrollbar-track {
        /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);*/ 
        -webkit-border-radius: 0px;
        background-color: green;
        border-radius: 0px;
    }
    
    /* Handle */
    ::-webkit-scrollbar-thumb {
        -webkit-border-radius: 0px;
        border-radius: 0px;
        background:brown; 
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    }
    
    /* OTHERS */
    
    div.space30{
    	height: 30px;
    	width: 30px;
    	float: left;
    }

＆＃13;

    <!DOCTYPE html>
    <html>
    	<head> <!-- INFORMATION SUR LA PAGE -->
    		<title> <!-- TITRE -->
    			Webite Template 1
    		</title>
    		<link href="styles/new_age.css" type="text/css" rel="stylesheet" media="screen, projection"/> <!-- LIEN CSS -->
    		<meta charset="utf-8"/> <!-- CONVENTION -->
    		<meta name="viewport" content="width=device-width"/> <!-- REDIMENSION -->
    		<meta name="viewport" content="width=device-width, initial-scale=1"/> <!-- ZOOM INITIAL -->
    	</head>
    	<body> <!-- CORP DE PAGE -->
    		<div id="topbar"> <!-- BAR VERTICALE FIX DU HAUT -->
    			<table id="table1">
    				<tr id="row1">
    					<td id="cell11" class="redD">
    						table1
    					</td>
    					<td id="cell12" class="yellowD">
    						table2
    					</td>
    				</tr>
    			</table>
    		</div>
    		<div id="sidebar" class="pinkD"> <!-- BAR LATERALE FIX DE L'UTILISATEUR -->
    			<p>
    				Harum trium sententiarum nulli prorsus assentior. Nec enim illa prima vera est, ut, quem ad modum in se quisque sit, sic in amicum sit animatus. Quam multa enim, quae nostra causa numquam faceremus, facimus causa amicorum! precari ab indigno, supplicare, tum acerbius in aliquem invehi insectarique vehementius, quae in nostris rebus non satis honeste, in amicorum fiunt honestissime; multaeque res sunt in quibus de suis commodis viri boni 
    			</p>
    		</div>
    		<div id="body"> <!-- CONTENU GENERAL -->
    			<div id="subbody" class="redD">
    				<div id="content" class="pinkD">
    					<div id="articleVer">
    					<article class="blueD">
    						<p>
    							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tada si quyle, dini joebu raladi luc pyri movala pile biv fadysepem nelimed disedila. Cesojad, sihelihe, ce foebedajoeva solel levajema, cumehadem su loeme ma. Vida fylacesa dadily, tyl lasipofefe fi fela hevamosele fovyb fenenoev te jecefany mal. Lam dabile mol syb nelalu relibaqu jy de litydeb sa bavafimad, mepe vibod len.<br />
    
    						</p>
    					</article><br>
    					<div class="space30 yellowD"></div>
    					<article class="blueD">
    						<p>
    							Fejaladib hepic bus vuha haf leme bimycabib mejodulad, rahaque lajed. Li, fira, lonem lulef pely ded mipalaman lid radydec dyv by le, qua mi. Dumac to mob tesed di mas fol sela ven divy dos bamyn honoerolefe bu. Hajofij, jilidoem refehavebe sadu, li quif moelihire lilibym civihoemofe boejep da. Ten boem buqu mejena va di myd leti bebeb ledefelum dityh myquenede.<br />
    							<br />
    							Vito, re mam meribebec, bafibev bid li rybihatu bovaf quef bem, lymoelep lecehoeta dedij. Fila hel ladoebe bemib debibim fymyt lafesemy moe quale nidy, dym leviba foed, fime. Tefy voe quabimur byma bariboebyli foli mirebelili dejolobe, loe bo. Di lebih bed cucabelem lidima li dej dacibam her, re duquabela pylasoedu sihef, car. Baf fitafi la miquabem dodipe bife hedoe, jos memoeboesih huf hicej dajoe semi rinivad.<br />
    						</p>
    					</article><br>
    					<div class="space30 yellowD"></div>
    					<article class="blueD">
    						Da diboer ba pali riji, mod moedabodem civ pacib cil hefemab le. Quibic lam moeneje ce, loemim tidef bed doelamy mo mi vel fumi. Quo davih jequel fivuba ciboeque, ri me dajeme de do ha pi someroe ba bivaqu. Laqu hufabi lapari lupalibam ril jidedacesa moe daror vereva sadyd fatos di del mibe, voeboemi. Hyfire lunepili basoroej betel dadobam tudol dy lybibeh bil pulequ quimam.<br />
    						<br />
    						Dyny maleh dudamibu lati devolel voe lal, lymoededa hamadidy laf. Jedetum li, bequit, ledal fiba fas de ha mi daloere quale sefetip pe mup, mec. Pyjedu fedepyp quelem befedem moef moejip fi doelyf bid hybu do taquecas. Bi, vadyvib, lolahoe, leded foedif manoe, lyte coema lytavove quemimijad tadu coedola bavi. Folad joemenuciho fofanytyc jeb quada, tu, jobequa jilicoe del, lim, lidameda libiduc dise bebaledi.<br />
    						<br />
    						Delafereb, diquib miv cyla sa pobef siqu tal, vilale, mecequi. Mul jic cep mesef dulalamufu dy mi felyl ceny lalali. Mile, lifoevilymi, dot sebinide tiribite, feji, meboebam bi ha baba melypadep. Lab dadaler rypimu, lad bal beva fere ja byve lo rife. Pemim ma voem ly quam ralafa ra mov, capely dolil queh ra dohesa.<br />
    						<br />
    						Dap quim lalelil til ty nira fedalineco mibi mida jicy pepi fofapu. Limifuv balib dasaloe fimecih besiviba lamy bev pufe bi, ni dym habet. Vuqu fahef face, dala molimoec foe quecifequype ladoe jel que ri dydedal. Didoj lomomid java nive be tididaci lel quarel diduf ne bah pid. Hoen, dutij mu balif, va dadym ly coeriny dal que demebequ cucif bibemyre dequibibepi.<br />
    						<br />
    						Mejih lidef lalimidy, lamefo jacoef, jym, rim momaje bef, fasenile dydeledu biqual vadalihe derofil bibabi. Folibuleboe laf, vodepi, letoedib, moem bor lefa cemece mifyp quab. Quile, deja, rib, civev lequufid ful rocoetequ lasahybebi ci su, bara. Lab baquebud, difob vaceduci fefa sediquer, dade femoelyd dilulil, hib bere. Pimycaha, myh hi nepaqu, pamera, nup bedybi voemi leroevabam peb jedi lufa fufuhaje ce di.<br />
    						<br />
    						Rere, ja papov hequibi vepep de dem, loepi jyse le nidap. Beludide quil, be jeby mycybuf jebe hed let piheb po boe jele. Lesoludev deb datis nebale ly bib lamihef quid liboecebe doedy bud. Mehivomi jabel lad fyli biheb bevedila boefem dema so, boemo boval dabil quefolyfihy liba bobibama. Fapele bajavema rub mebib syb ril fab roejub jimoemimame dobifa lebyquif.<br />
    						<br />
    						Tep calyf hyci, jup tyquejim dime, quimij mohiv siquuv dali labe hebeduc du dimi bi. Mymaf, mide je bipa lyj fihafamemi femel fi mit, hebe miba doecevib, he tifil. Maheli nevidos vebe fodota fi debaly poera memeho mibiqu nebydu batel. Dimi nipam si hasibes nefas mi niben loe, lije semy. Casoro coeli pumij calejaro ra, quu vudedoelibe mafadema pevilapome fehil ma bidad febapovu, lof ber.<br />
    						</p>
    					</article><br>
    					<div class="space30 yellowD"></div>
    					<article class="blueD">
    						<p>
    							Loereb bi vi byvi homequoedid meli tiquud helysi ful jinep vyde memoesoejoeb leduquerib. Dy ly beloesa lefu hyvoe jimyf mad moe cac pines boeb quesoej, vo, dem dedaj. Hev fequ he mimu, quoere foe loeje me sy da. Meloefoemi lar vih tid, jef my fifa befape, qua, lef. Talatuc moelejil sisac lale dapul pididibe, coequale benim malev paquoeti lyhibiv mad moe piru.<br />
    							<br />
    							Moci dalo nebibepi deb le dere, calo pi cij, lil joe bele se, mofe dac. Reta luloheceta de tehibi fo nehil cija me, rinejyquib mepe domoereme foequos fof. Pemy bed loemetequa bone bamula fyhemam moesiheba do ped beh duqueme, me lef dunoela. Mo, hepequas, redib byryloe madi tes judedysabo lim, jedimu defubaquemy bym. Teci meb lan rodoeb, moedeme joela nebudis boeb vequuboedi lerar quymi, ruboda doeniqu dorinal, seb.<br />
    
    						</p>
    					</article><br>
    					<div class="space30 yellowD"></div>
    					<article class="blueD">
    						<p>
    							Liji dys buqueli quemy tabure latoe savoemom miv be lol lediv saj libi rahelite. Lil leram bab sej, cy poehafe, dun momamifery lin leb hujasi to besabafar beliboloes. Cebis jeju miti capacapa tabel fil quoedeb, li tala jasa rehudaba ledel. Dovib febabybode be bet si mo befamoeha buhe fabi sib mi. Lem, mepijama raba lydefi pad, sasadelemi doep lima de dac nen lohil dy coeditequ.<br />
    							<br />
    							Renama del, seb vomaqu ledulahit bivebene fat lidepali sepylipe hyfe buqu ber nel. Lo danam rif se, quaquida, fabi mufimer foda, dapoe mamotiti fyvoeroede febimeba divoe jovotibat. Pybu boefuloefoe, dima, noeceb, ha semameli bilame cem, roru mimab fefal. Mab le mep boelabadola, lelebo vel ni limatequ masev ri mydony, dedo lis, vadoloe, muqua. Munih medej hajol dyl lajidile da vobalefequa fiboemelila muloel, cobi, dare lequel nibedyj lihi.<br />
    							<br />
    							Leb, dy lip vebihedy malup quod, silerasoc fy vad lolepi, ne vehymami baliboecam quase. Jebe defimiroeje duseboe hoejosoepicu, ripesif boe hesyquis ti botaderade byvil malemaloen fal fad fa. Bah quife lonaba teva bahemoece, dabali, fab fevi dymadidab mevi ma, miqu da bo boen. Que, fem bavu pimel lapun caly nif ci sybecobef quim hoviv vemoedyreb pi. Myla doemeta bumu, dala lo mobej bi bip siv ha.<br />
    							<br />
    							Fod nere hatimevi ji, nafecal quoe nedu la jyli baved que labofu cemeboene. Loemaqu, bydeque, diquolil bimina, roedysitoefi la mifoca lahab, ni bedalid bila mib res rilot meh. Lelel, noe fypacate beb filamyqu fa leti quef ca lehalibe fod demomim, bafuhem fa. Tav, jef quyj dad dyl lamycineh mebifafi quajycy hid, roejoeb, tatoe, lilacu, qui. Romi hi tiryd nanefe dabad vyroerume tahi fu mab mem ryb dabalebule, be hy.<br />
    							<br />
    							Rema lyfehef quyqui vulime rar vem de, favel betiboe, tad botobetidi fijatal, made lo duda. Bylaj lyqua mof di tatebyjin dorili nid veroef jeloes hedoe ca bihi, jenetyr levo quoes. Lasybeli tid loecede boef na, lynidaqu feri, velub midu, baquy bab li. Mipisades, savijobusi, hi vahequ, mo leledemyjoe, micely le pedamub, libafeme, halime. Dicap, mi lifafi nobif diladovy ca vif pydemi, lom loemobesyja da cabem memeti quolic.<br />
    							<br />
    							Jaj lima doef besip, macaji dujac lade, nyrifesequ del di pare misebafeh. Nilenocufe macepalo leh lyvoelefo foejitahy noeh leboe, lysoe cu hifub fyva quavah, beb. Bab, len mev ny camym fi so tem cequedoledi toequ bola. Bire povilyby sa hivef cet qual fe, sepe nirif misoedemes. Salefy dubuv raf lequetili di majehodi myfoeb lef bomic hedoe covaletoe.<br />
    							<br />
    							Nab lyquili foedah lasi deritoe fipul se, lih vely rabe bodaj debi. Quilypule, vam latel re dirimali bahoef doe libeb lymyledi mucique cyn, vud. Lef, lid quah mafefideboe soeboele bydamoe roedec quaverami loeficome valemom lad lih lec relatele. De ti naboele tes cibodice mebipe taher firec lali loe lisoelapidi, hytyb mi bomime ro. Lis fih, le, hymusebefe boelefes coece voec pimebevi simivese ce liqu, boelilalib da sarap.<br />
    							<br />
    							Lyre di feciv ji vif lib dimi si ho melelu foboe faquad byqu. Vi, da se biloeninu pihimiqua rebifa neh ja bem lar, hamada loecy, dub. Fab pabo los quotal mid, bibi lijipeli joboev hi cafamoelan. He bu de befiboeme sip pitelac mequob lyje lavum, byn noelefu racoe sevivasad lebomevap nuresi. Bybu talabe by cyfalale, qui, rinoe mat jeli que lomoeda.
    						</p>
    					</article><br>
    					<div class="space30 yellowD"></div>
    					</div>
    						<div id="sideContent" class="yellowD">
    							<p>
    								<h3>
    								Div cot
    								</h3><br>
    								<br>
    								Lyre di feciv ji vif lib dimi si ho melelu foboe faquad byqu. Vi, da se biloeninu pihimiqua rebifa neh ja bem lar, hamada loecy, dub. Fab pabo los quotal mid, bibi lijipeli joboev hi cafamoelan. He bu de befiboeme sip pitelac mequob lyje lavum, byn noelefu racoe sevivasad lebomevap nuresi. Bybu talabe by cyfalale, qui, rinoe mat jeli que lomoeda.
    							</p>
    						</div>
    				</div>
    			</div>
    		</div>
    		<div id="footer"" class="greenD"> <!-- PIED DE PAGE -->
    			footer
    		</div>
    	</body>
    </html>

＆＃13;

Answer 1

#body包含浮动元素是它们之后的明显缺失。

您可以修复将overflow: hidden;添加到#body的问题（例如，有更多选项）。

#body {overflow: hidden}

或clear: both至footer应提供帮助。

footer {clear: both}

Answer 2

在div＃footer -

上应用CSS

div#footer {
bottom: 0;
clear: both;
height: 200px;
position: fixed;
width: 100%;

}

Answer 3

    #footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:green;clear: both;
}

页面侧面的页脚

3 个答案: