Shrink height of website to be mobile friendly
Question
I have a Website that I am working on. Before I get too far (yes most of the links don't work because I haven't made them yet) I am trying to make sure it fits on iPhones and other mobile devices. The height (CSS) works great on a computer, but it extends far below what I intend when loaded on a mobile device.
Here is the script of my index.html page:
html body {
width: 100%;
height: 100%;
margin: 0%;
padding: 0px;
overflow: hidden;
display: flex;
background-image: url(http://www.jpegchaos.com/chipimage.jpg);
background-repeat: no-repeat;
background-size: cover;
}
#fullbody {
margin: 0px;
float: left;
position: absolute;
padding: 0px;
width: 100%;
height: 100%;
display: flex;
}
#left {
width: 15%;
height: 100%;
padding: 0px;
margin: 0px;
display: inline-block;
opacity: 0;
}
#center {
width: 70%;
height: 100%;
padding: 0px;
margin: 0px;
background-color: lightgrey;
display: inline-block;
}
#centertextarea {
width: 90%;
height: 100%;
padding: 0px;
margin-right: 5%;
margin-left: 5%;
margin-top: 0px;
text-wrap: normal;
word-wrap: break-word;
}
#right {
width: 15%;
height: 100%;
padding: 0px;
margin: 0px;
display: inline-block;
}
.header {
font-size: 40px;
color: black;
text-align: center;
}
.footer{
background-color: lightgrey;
font-size: 13px;
color: black;
text-align: center;
bottom: -60px;
height: 100px;
left: 0;
position: absolute;
width: 60%;
margin-left: 20%;
}
then the HTML
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content='width=700'>
<title>JPeG & Chaos LLP - Your Technology Repair HQ</title>
<link rel="stylesheet" href="styles/structure.css">
<link rel="stylesheet" href="styles/advanced.css">
<link rel="stylesheet" href="styles/tags.css">
<link rel="icon" type="image/png" href="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpf1/v/t1.0-1/c27.0.160.160/p160x160/541649_1552490621690166_7622307717201533155_n.jpg?oh=0be92daed3243de2719efe5185583bc1&oe=55D3880B&__gda__=1437242841_f81d654a074a10e951f604fd343220c9">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function () {
$("#top").load("structure/header.html");
$("#bottom").load("structure/footer.html");
$("#menubar").load("structure/menubar.html");
$("#newssidebar").load("news.html");
});
</script>
</head>
<body>
<div id="fullbody">
<div id="left"></div>
<div id="center">
<div id="top"></div>
<div id="menubar"></div>
<div id="centertextarea">
<table class="noborder">
<tr class="noborder">
<td class="splitleft">
<!-- Removed for Clerity -->
</td>
<td class="hollowmiddle"></td>
<td class="splitright">
<!-- Removed for Clerity -->
</td>
</tr>
</table>
</div>
<div id="bottom"></div>
</div>
<div id="right">
<div id="newssidebar"></div>
</div>
</div>
</body>
</html>
The frames and everything load perfectly, but the center one seems to go WAY too far.
I took out the "footer" div and it's still too tall, so excluding that from the possibility list.
1 answers
solution1
1 ACCPTED 2015-05-31 22:31:29
Throught many changes, and the comments I received I did the following to fix this:
*removed height function from the #right div
*changed #left div to height: 1px;
*changed #center div to height: 100vh
*added overflow-y: auto; to the #center div
*changed #footer to:
.footer{
background-color: lightgrey;
font-size: 13px;
color: black;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 70%;
margin-left: 15%;
white-space: nowrap;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.