Question

我有一个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>

提前谢谢。

Answer 1

尝试执行重置样式，如：

* {margin: 0; padding: 0;}

然后唯一需要担心的填充和边距是你设置的。

Answer 2

从height: 100%;

中删除<div id="loginSource" style='height: 100%; width: 100%;'></div>

Answer 3

好的，谢谢你们对我的问题感兴趣。我在代码中发现错误，现在它工作得非常好。问题是以下css中的position属性。

label>input { /* HIDE RADIO */
    visibility: hidden; /* Makes input not-clickable */
    position: absolute; /* Remove input from document flow */
}

当我从CSS中移除位置时，问题就出现了。

删除文档底部和元素之间的空白区域

3 个答案: