Removing blank space between document bottom and element
Question
I have a HTML page that when scrolled should limit scroll to the document height. It must not scroll beyond the bottom of element.
Attaching screen shot for better understanding.
Scrolling must be limit after the End of Form or removing unwanted space after the form if possible.
For Your Referance.
CSS
html {
background: url('image_url') no-repeat
center center fixed;
<!-- -
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
-- -->
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
top: 0;
width: 100%;
height: 100%;
}
table {
font-family: Calibri;
color: #2BB2E7;
font-size: 11pt;
font-style: normal;
text-align:;
background-color: #0086CA;
border-collapse: collapse;
border: 0px solid gray;
background-image:
url('http://www.dumbelled.com/assests/css/img/pattern.png');
max-width: 500px;
width: 100%;
margin-top: 1%;
margin-left: 20%;
margin-bottom: 0%;
padding: 0;
}
table.inner {
border: 0px
}
label.error {
color: red;
}
input.error, select.error, textbox.error {
border: 1px solid red;
}
label>input { /* HIDE RADIO */
visibility: hidden; /* Makes input not-clickable */
position: absolute; /* Remove input from document flow */
}
label>input+img { /* IMAGE STYLES */
cursor: pointer;
border: 2px solid transparent;
}
label>input:checked+img { /* (RADIO CHECKED) IMAGE STYLES */
border: 2px solid #2BB2E7;
}
div.row43:hover>div {
opacity: 0.5;
}
div.row43:hover>div.column43:hover {
opacity: 1.0;
}
div.row43:hover {
border-color: #0099ff;
}
div.column43:hover {
opacity: 0.5;
border-color: #0099ff;
}
@media ( max-width : 600px) {
html {<!-- -
background: url(img/img3.jpg) no-repeat center center fixed; -- -->
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
h3 {
font-family: Calibri;
font-size: 22pt;
font-style: normal;
font-weight: bold;
color: SlateBlue;
text-align: center;
text-decoration: underline
}
table {
font-family: Calibri;
color: #2BB2E7;
font-size: 11pt;
font-style: normal;
text-align:;
background-color: #0086CA;
border-collapse: collapse;
border: 0px solid gray;
background-image:
url('http://www.dumbelled.com/assests/css/img/pattern.png');
max-width: 500px;
width: 100%;
margin: 0%;
}
table.inner {
border: 0px
}
label.error {
color: red;
}
input.error, select.error, textbox.error {
border: 1px solid red;
}
}
HTML
<body>
<div id='content'>
<form method="POST">
<table align="center" cellpadding="20px"
style="box-shadow: 0px 0px 5px #000;">
<!----- logo ---------------------------------------------------------->
<tr>
<td colspan="2" align="center"><img src="logo_address" /></td>
</tr>
<!----- First Name ---------------------------------------------------------->
<tr>
<td width="45%"><b><div style="width: 50px">NAME</div></b></td>
<td width="55%"><input type="text" id="name" name="First_Name"
maxlength="30" style="width: 100%; max-width: 300px;"
pattern="^[A-z ]+$" required /></td>
</tr>
<!----- Email ---------------------------------------------------------->
<tr>
<td width="45%"><b><div style="width: 50px">EMAIL</div></b></td>
<td width="55%"><input type="email" id="email" name="email"
style="width: 100%; max-width: 300px;" required /></td>
</tr>
<tr>
<td colspan="2" align="center"><h3
style="color: #2BB2E7; font-size: 22pt;">PICK CHOOSE THE
CHANNEL</h3></td>
</tr>
<!----- Sources ---------------------------------------------------------->
<div class="row43">
<tr>
<td colspan="2" align="center">
<div class="column43">
<label><input type="radio" name="Source" value="1"
required /><img src="image_address"></label><br />
</div>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<div class="column43">
<label><input type="radio" name="Source"
value="2" required /><img src="image_address"></label><br />
</div>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<div class="column43">
<label><input type="radio" name="Source" value="3"
required /><img src="image_address"></label><br />
</div>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<div class="column43">
<label><input type="radio" name="Source"
value="4" required /><img src="image_address"></label><br />
</div>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<div class="column43">
<label style='width: 300px; height: 75px'><input
style='width: 100%; height: 100%' type="radio" name="Source"
value="5" required /><img src="image_address"></label><br />
</div>
</td>
</tr>
</div>
<!-- <tr>
<td colspan="2" align="center">
<button type="button" id="alertbtn" value="alert"
style="background-color: #2BB2E7; color: #ffffff;"
onclick="myAlertBox()">CONNECT</button>
</td>
</tr>-->
</table>
</form>
</div>
<div id="successmsg" class="messagediv gap_div" align="center"
style="color: #2BB2E7;">
<b>Hurray! Your profile has been setup successful.</b>
</div>
<div id="errormsg" class="messagediv gap_div" align="center"
style="color: #2BB2E7;">
<b>Oops! I am sorry, something went wrong. Let us try back in a
few minutes.</b>
</div>
<div id="loadingImage" class="gap_div"
style="text-align: center; margin: 0px; padding: 0px; position: fixed; right: 0px; top: 0px; width: 100%; height: 100; background: transparent;">
<p style="position: absolute; top: 50%; left: 35%;">
<img alt="Loading... Please wait"
src="image_address" style="max-width: 250px;">
</p>
</div>
<div id="loginSource" style='height: 100%; width: 100%;'></div>
</body>
Thank you in advance.
3 answers
solution1
0 2016-09-14 08:14:45
Try doing a reset style like:
* {margin: 0; padding: 0;}
Then the only padding and margins to worry about are ones that you set.
solution2
0 2016-09-14 08:16:09
Remove height: 100%; from <div id="loginSource" style='height: 100%; width: 100%;'></div> <div id="loginSource" style='height: 100%; width: 100%;'></div>
solution3
0 2016-09-16 13:46:14
Ok, Thank you guys for your interest in my question. I found mistake in my code and now it is working perfectly fine. The problem was position attribute in the following css.
label>input { /* HIDE RADIO */
visibility: hidden; /* Makes input not-clickable */
position: absolute; /* Remove input from document flow */
}
When I removed position from the CSS the problem is soved.
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.
Related Question
Removing blank element
Blank space in the bottom of HTML page
Removing blank spaces between slides
How to fix error: Web with blank space at bottom
CSS Print Media Query removing blank space
Removing unwanted space between images
Removing Element from Document Flow
How to calculate the size / the space between the top of current display resolution and the bottom position of a td element in HTML DOM?
Place element at bottom of the visible part of the document element
Checking an Array Element for Two Blank Space Characters
Related Tags