Question

我希望页面上的某个区域可以滚动。下面的代码就是这样。但是，我希望可滚动区域的高度可以扩展到屏幕尺寸，但是对于给定的屏幕尺寸，可以查看可滚动区域的最大数量。

<head>
    <title></title>
</head>

<body style="background-color:lightgrey; overflow:hidden">
    <div id="nav">
        London<br>
        Paris<br>
        Tokyo<br>
    </div>

    <div class="page-wrap">
        <h1>Reporting System</h1>

        <h3 style="font-family: Arial, Helvetica, sans-serif">Find a
        Student</h3><br>

        <fieldset>
            <legend></legend>

            <h2><legend>Details</legend></h2><legend></legend>

            <form class="pure-form" onsubmit="return false;">
                <label>Last Name &nbsp;&nbsp;</label><input autofocus="" class=
                "lastname" id="lastname" name="lastname" type="text"><br>
                <br>
            </form>
        </fieldset><br>

        <div class="buttonAlign">
            &nbsp;&nbsp;<input class="button-error pure-button" onclick=
            "cancel();" type="button" value="Clear"> <input class=
            "button-secondary pure-button" id="button" type="button" value=
            "View ALL"> <input class="button-secondary pure-button" id=
            "button1" type="button" value="Search">
        </div><br>
        <br>

        <div id="info"></div><br>

        <div style="overflow-y : auto; max-height: 250px; width: 100%;">
            <div id="comments"></div>
        </div>
    </div>
</body>

Answer 1

我没有完整的源代码......但这是我向您展示概念的一个例子。

Here is the JSfiddle demo

屏幕截图：

// HTML

<!DOCTYPE html>
<html>
<head>
    <link href="index.css" rel="stylesheet">
</head>
<body>
    <nav>
        <div>
            <div id="logo">Reporting System</div>
        </div>
        <div>
            <input id="srchbar" type="search" placeholder="Search by last name...">
            <div id="srchbtn" class="form-btn btn-black"><span>search</span></div>
        </div>        
        <div>
            <a href="#">London</a>
            <a href="#">Paris</a>
            <a href="#">Tokyo</a>
        </div>
    </nav>
    <section id="main">
        <article id="container">
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
            <div class="result">result data from database...</div>
        </article>
    </section>
    <footer></footer>
</body>
</html>

// CSS

body{
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: column;
    flex-direction: column;

    height: 100vh;
    width: 100vw;
    margin: 0 !important;
}
nav{
    display: -webkit-flex;
    display: flex;

    width: 100%;
    min-height: 60px;

    z-index: 999;
    background: #1E67CB;

    box-shadow: 0 1px 5px rgba(0,0,0,.6);
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.6);
}
nav>div{
    text-align: center;

    -webkit-flex: 1;
    flex: 1;

    -webkit-align-self: center;
    align-self: center; 
}
#logo{
    display: -webkit-flex;
    display: flex;
    cursor: default;
    -webkit-align-self: center;
    align-self: center;

    margin-left: 1em;
    color: #fff;
    font-weight: bold;
    font-size: 1.15em;
    line-height: 1.43;  
    -webkit-font-smoothing: antialiased;
    font-family: Circular,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
#srchbar{
    height: 30px;
    width: 400px;
    border: none;
    color: #7C7C7C;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    outline: none;
    font-size: 1em;
    -webkit-font-smoothing: antialiased;
    font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;
    text-align: center;
    border: 1px solid #d5dadc;
    cursor: pointer;
        -webkit-box-shadow: inset 0px 2px 7px rgba(0, 0, 0, 0.40);
    box-shadow: inset 0px 2px 7px rgba(0, 0, 0, 0.40);

}
#srchbtn{
    display: -webkit-flex;
    display: flex;

    -webkit-justify-content: center;
    justify-content: center;

    height: 30px;
    width: 80px;
    cursor: pointer;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
}
#srchbtn>span{
    display: -webkit-flex;
    display: flex;

    color: #fff;
        -webkit-font-smoothing: antialiased;
    font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;

    -webkit-align-self: center;
    align-self: center;
}
nav>div{
    width: 50vw;    
    display: -webkit-flex;
    display: flex;
}
nav>div:nth-of-type(1){
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
nav>div:nth-of-type(2){
    -webkit-justify-content: center;
    justify-content: center;
}
nav>div:nth-of-type(3){
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}
nav>div>a{
    display: -webkit-flex;
    display: flex;

    -webkit-align-self: center;
    align-self: center;

    text-decoration: none;
    cursor: pointer;
    color: #fff;
    font-size: 1em;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;

    margin: 0 .5em;
    padding: 0.6em 1.5em;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-transition: background-color 100ms;
    -webkit-transition: background-color 100ms;
    transition: background-color 100ms;
}
nav>div>a:hover{
     background: rgba(255,255,255,0.15);
}
nav>div>a:active{
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
#main{
    display: -webkit-flex;
    display: flex;

    -webkit-justify-content: center;
    justify-content: center;

    overflow: scroll;
/*  margin: 60px 0; */
    background: #ccc;
}
#container{
    display: -webkit-flex;
    display: flex;

    overflow: scroll;
    background: #fff;

    max-width: 1280px;
    width: 100%;

    -webkit-flex-direction: column;
    flex-direction: column;

    border-left: 1px solid black;
    border-right: 1px solid black;

    -webkit-box-shadow: inset 0px 2px 7px rgba(0, 0, 0, 0.40);
    box-shadow: inset 0px 2px 7px rgba(0, 0, 0, 0.40);
}
.result{    
    text-align: center;
    padding: 10px 0;
    cursor: pointer;    

    min-width: 1280px;
    border-bottom: 1px solid black;
}
.result:hover{
    background: rgba(8, 8, 8, 0.46);
}
footer{
    display: -webkit-flex;
    display: flex;

    width: 100%;
    min-height: 60px;

    z-index: 999;
    background: #1E67CB;

    box-shadow: 0 -1px 5px rgba(0,0,0,.6);
    -webkit-box-shadow: 0 -1px 5px rgba(0,0,0,.6);
}
.form-btn{
    width: 22.1em;  
    color: #FFF;
    align-self: center;
    border: none;
    cursor: pointer;
}
.form-btn:active{
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); 
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-black{
    background: #767575;
}
.btn-black:hover{
    background: #828282;
}

Answer 2

这些总是令人厌恶的。我发现最好的方法是使用绝对位置。

<body style="position: relative; width: 100%; height: 100%;">
    ....
    <div style="position: absolute; top: 12px;left:12px;right:12px;bottom:12px;height:100%;overflow-y:scroll">
    ....
</body>

另外，我建议使用overflow-y:auto，这样你只需要在需要时获得滚动。我发现它似乎与人们待得更好。

看看这对你有用吗？：）

在HTML中显示尽可能多的可滚动部分

2 个答案: