Fix on the bottom of the browser

<!DOCTYPE HTML> 
<html>
<head>
<meta charset="utf-8"> 
<title>topFix</title> 
</head> 
<body>
<div style="position:fixed;background:yellow;width:100%;">top is fixed</div> 
line01<br>line02<br>line03<br>line04<br>line05<br>
line06<br>line07<br>line08<br>line09<br>line10<br>
line11<br>line12<br>line13<br>line14<br>line15<br>
line16<br>line17<br>line18<br>line19<br>line20<br>
line21<br>line22<br>line23<br>line24<br>line25<br>
line26<br>line27<br>line28<br>line29<br>line30<br>
line31<br>line32<br>line33<br>line34<br>line35<br>
line36<br>line37<br>line38<br>line39<br>line40<br>
line41<br>line42<br>line43<br>line44<br>line45<br>
line46<br>line47<br>line48<br>line49<br>line50<br>
line51<br>line52<br>line53<br>line54<br>line55<br>
line56<br>line57<br>line58<br>line59<br>line60<br>
line61<br>line62<br>line63<br>line64<br>line65<br>
line66<br>line67<br>line68<br>line69<br>line70<br>
line71<br>line72<br>line73<br>line74<br>line75<br>
line76<br>line77<br>line78<br>line79<br>line80<br>
line81<br>line82<br>line83<br>line84<br>line85<br>
line86<br>line87<br>line88<br>line89<br>line90<br>
line91<br>line92<br>line93<br>line94<br>line95<br>
line96<br>line97<br>line98<br>line99<br>line00
</body>
</html>

Yellow block is always on top of the browser.by the code above
How can I make it the yellow block is always on bottom of the browser?

Hi,

You haven’t set any coordinates for the position. The default values are auto, which means where the flow would have placed it, i.e. at the top in this case.

Try add bottom: 0; in the style and see what happens. :slightly_smiling_face:

There are other methods to place it where you want, but I guess you’re experimenting in order to learn? :+1:

1 Like

I would suggest using position:sticky (if design allows) and then you don’t cover up the last content.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0;
}
.footer {
	position:fixed;/* fallback*/
	position:-webkit-sticky;/* ios needs this*/
	position:sticky;/* good browsers*/
	background:yellow;
	width:100%;
	bottom:0;
	left:0;
}
</style>
</head>

<body>
line01<br>
line02<br>
line03<br>
line04<br>
line05<br>
line06<br>
line07<br>
line08<br>
line09<br>
line10<br>
line11<br>
line12<br>
line13<br>
line14<br>
line15<br>
line16<br>
line17<br>
line18<br>
line19<br>
line20<br>
line21<br>
line22<br>
line23<br>
line24<br>
line25<br>
line26<br>
line27<br>
line28<br>
line29<br>
line30<br>
line31<br>
line32<br>
line33<br>
line34<br>
line35<br>
line36<br>
line37<br>
line38<br>
line39<br>
line40<br>
line41<br>
line42<br>
line43<br>
line44<br>
line45<br>
line46<br>
line47<br>
line48<br>
line49<br>
line50<br>
line51<br>
line52<br>
line53<br>
line54<br>
line55<br>
line56<br>
line57<br>
line58<br>
line59<br>
line60<br>
line61<br>
line62<br>
line63<br>
line64<br>
line65<br>
line66<br>
line67<br>
line68<br>
line69<br>
line70<br>
line71<br>
line72<br>
line73<br>
line74<br>
line75<br>
line76<br>
line77<br>
line78<br>
line79<br>
line80<br>
line81<br>
line82<br>
line83<br>
line84<br>
line85<br>
line86<br>
line87<br>
line88<br>
line89<br>
line90<br>
line91<br>
line92<br>
line93<br>
line94<br>
line95<br>
line96<br>
line97<br>
line98<br>
line99<br>
line100
<div class="footer">Bottom is fixed</div>
</body>
</html>
1 Like

Hi, you can to use:
html,body,div.content_main{height:100%;}
footer{bottom:0;}

Hi codexcotechnologies, welcome to the forum!

I don’t understand your suggestion, those css rules doesn’t really do anything relevant to the topic. It seems you didn’t post all relevant css.

Is your suggestion meant to add or replace part of the OP code?

It’s not clear how to use what you posted, please explain. :slightly_smiling_face:

1 Like

As Erik said your code is incomplete but assuming you were trying to absolutely place the footer at the bottom of a 100% high container then that is an outdated approach prone to difficulties in responsive design.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.