[英]Removing blank space between document bottom and element
我有一個 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>
先感謝您。
嘗試做一個重置風格,如:
* {margin: 0; padding: 0;}
然后唯一需要擔心的填充和邊距是您設置的。
去除height: 100%;
來自<div id="loginSource" style='height: 100%; width: 100%;'></div>
<div id="loginSource" style='height: 100%; width: 100%;'></div>
好的,謝謝大家對我的問題感興趣。 我在我的代碼中發現了錯誤,現在它工作得很好。 問題是以下 css 中的位置屬性。
label>input { /* HIDE RADIO */
visibility: hidden; /* Makes input not-clickable */
position: absolute; /* Remove input from document flow */
}
當我從 CSS 中刪除位置時,問題就解決了。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.