Question

我围绕这个页面有一个有趣的问题。应该发生的事情是你在视频上看到一个漂亮的红色框，并且在这个框内是链接按钮，当点击它们从外部文件加载一些文本，并将其放入其中一个子div。文本不应该溢出框，框应该伸展到视口的底部。问题是这在不同的设备上非常有用。如果你有一个很长的章节，并且你在一个较小的浏览器中，你可以向下滚动，但是你不能滚动到顶部。

我看了很多解决方案，正如你所看到的 - 跟随无数的Stack Overflow帖子，但不知何故，我觉得我的问题可能在css中更深层次，我不知何故做错了。如果有人可以看看，也许可以帮助我走上正轨，我真的很感激！提前谢谢！

 html, body{
    height: 100%;
 }
 .box{
    background-color: rgba(112, 0 , 0, .85);
    width: 60%;
    height: 100vh;
    overflow: hidden;
    /* http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border-radius: 10px;
    color: white;
    font-family: 'Quicksand', sans-serif;
}
#storybox{
    width: 90vw;
    min-height: 100vh;
    height: 100%;
}
#storyc{
    display: inline-block;
}
.no_box{
    height: 50vh;
}
.link_box{
    height: 100vh;
}
.link_box a:link {
    text-decoration: none;
    color: white;       
}
.link_box a:visited {
    text-decoration: none;
    color: white;       
}
#storybox a:link {
    text-decoration: none;
    color: white;
}
#storybox a:visited {
    text-decoration: none;
    color: white;
}
.link_box ul{
    list-style-type: none;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    line-height: 400%;
}
.box ul{
    list-style-type: none;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    line-height: 400%;
}
.large_text{
    font-size: 24px;
}
.title_text{
    font-size: 48px;
}
.left_align{
    text-align: left;
}
#big-video-wrap{
    z-index: -1;
}

#storybox{
    display: none;
}

#story{
    text-align: left;
}

/* http://sixrevisions.com/css/disable-text-selection/ */
.no-select {
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer */
    -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
    -webkit-user-select: none; /* Chrome, Safari, and Opera */
    -webkit-touch-callout: none; /* Disable Android and iOS callouts*/
 }

JS：

    function getCookie(cname) { //http://www.w3schools.com/js/js_cookies.asp
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i=0; i<ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1);
            if (c.indexOf(name) == 0) return  c.substring(name.length,c.length);
    }
    return "";
}
//The one and only cookie (we can expand later if need be.)
$(document).ready(function(){
    if (!getCookie("landed")){
        window.location.assign("./landing.php");
    }
    $("#links").on('click', 'a', function(){
        $("#storybox").css("display", "none");
        var chapter = $(this).attr("data-chnum");
        $("#chaptertitle").html("Chapter " + chapter);
        $.ajax({
        url: "chapters/ch" + chapter + ".php#story",
        success: function(res){
        $("#links").css("visibility", "hidden");
        $("#storyc").html(res + "<p><b><a href='#links'>Return</a></b></p>"); 
        $("#storybox").slideDown(800);
        $('html, body').animate({ scrollTop: 0 }, 'fast');
        },
        statusCode: {
        404: function(){
            $("#storyc").html("<p>Error, chapter not found!</p><p><b><a href='#links'>Return</a></b></p>");
            $("#storybox").slideDown(800);
        }
        },
        async: false,
        });
    return true;
});
    $("#storyc").on('click', 'a', function(){
    $("#links").css("visibility", "visible");
    $("#storybox").css("display", "none");
    $('html, body').animate({ scrollTop: 0 }, 'fast');
    $("#storyc").html("");
    });
});
$(function() {
    var BV = new $.BigVideo();
    BV.init();
    BV.show('https://vjs.zencdn.net/v/oceans.mp4',{ambient:true});
});

HTML：

 <!DOCTYPE html>
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
     <link href='https://fonts.googleapis.com/css?family=Quicksand:400,300,700' rel='stylesheet' type='text/css'>
     <link href='js/BigVideo/css/bigvideo.css' rel='stylesheet' type='text/css'>
     <link href='css/styles.css?1457332650' rel='stylesheet' type='text/css'>
     <script data-rocketsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/rocketscript"></script>
     <script data-rocketsrc="js/video-js/video.js" type="text/rocketscript">       </script>
     <script data-rocketsrc="js/BigVideo/lib/bigvideo.js" type="text/rocketscript"></script>
     <script data-rocketsrc="js/application.js?1457332650" type="text/rocketscript"></script>
     <title>----------------</title>
</head>
<body>
    <div class='no_box'></div>
    <div class='box link_box no-select' id='links'>
        <ul id='linksul'>
            <li class='large_text'>&copy; 2016 -------------</li>
            <li class='large_text'><a href='#storybox' data-chnum='i'>Dedication</a></li>
            <li class='large_text'><a href='#storybox' data-chnum='I'>Chapter I</a></li>
            <li class='large_text'><a href='#storybox' data-chnum='II'>Chapter II</a></li>
            <li class='large_text'><a href='#storybox' data-chnum='III'>Chapter III</a></li>
            <li class='large_text'><a href='#storybox' data-chnum='IV'>Chapter IV</a></li>
            <li class='large_text'><a href='#storybox' data-chnum='V'>Chapter V</a></li>
            <li class='large_text'><a href='#storybox' data-chnum='NEXT'>Next</a></li>
     </ul>
</div>
<div class='no_box'></div>
<div id='storybox' class='box'>
    <p class='large_text' id='chaptertitle'>Chapter:</p>
    <div id='storyc'></div>
</div>

正确处理div高度 - vh

0 个答案: