-1
我有一個HTML頁面，滾動時應該限制滾動到文檔高度。它不能滾動到元素底部之外。刪除文檔底部和元素之間的空白區域
附加屏幕截圖以便更好地理解。
滾動必須形式或形式如果可能的話之後除去不需要的空間結束之後限制。
爲您的退出。
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>
預先感謝您。
這不起作用 –