Question

我的页面设置为100％高度的“内容包装”和最大宽度，因此在垂直显示（低宽度）上打开时显示侧檐（和正文背景）。这个div导致页面打开完全滚动到底部，而不是像普通页面那样在顶部滚动。

Chrome 58.0.3029.81（64位）出现问题，我还没有测试过其他浏览器。

CSS：

html {
    /*background: url(img/bg.jpg) repeat center center fixed;
    background-repeat: repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;*/
}

body {
    /*background-color: transparent !important;*/
    background: linear-gradient(42deg, #0a193b, #072760);
    opacity: 0.9;
}

.no-padding {
    padding:0 !important;
}

.img-circle {
    border-radius: 50%;
}

#container-content {
    display:block;
    position:relative;
    overflow-x:hidden;
    overflow-y: auto;

    max-width: 60em;
    width:1366px;
    height:100%;
    /*padding:0 20px 0 20px;*/
    margin:0 auto;
    margin-top:2rem;

    background-color: #FEFEFE;
    box-shadow: 0 0 1em #000;
}

#header {
    z-index:1;
    position:absolute;
    width:100%;
    color:#FFF;
    font-size:18px;
}

.navigation {
    text-align:right;
    padding:10px 30px 0 0;
}

#footer {
    position:absolute;
    bottom:0;
    width:100%;
    color:#FFF;
    background:#1a1d25;
    text-align:center;
}

#video-banner {
    width:100%;
    height:500px;
    max-height:500px;
    margin-top:-14px;
}

#whoami {
    margin:0 auto;
    width:95%;
    padding:20px;
    background:#ececec;
}

#mypic {
    max-width:200px;
}

HTML：

<body>
    <div id="container-content">
        <div class="container-fluid no-padding">
            <div id="header">
                <div class="row">
                    <div class="col-xs-2" style="background-color:yellow;">
                        LOGO
                    </div>
                    <div class="col-xs-10 navigation">
                        Início Sobre Portfolio Contactos
                    </div>
                </div>
            </div>

            <div id="banner">
                <video id="video-banner" autoplay loop>
                  <source src="timelapse.webm" type="video/webm">
                Your browser does not support the video tag.
                </video>
            </div>

            <div id="whoami">
                <div class="row">
                    <div class="col-xs-3">
                        <img class="img-circle" id="mypic" src="img/eu_cut.jpg" />
                    </div>
                    <div class="col-xs-9" style="background-color:pink;">
                        Lorem ipsum dolore madre mia conho putana milho
                    </div>
                </div>
            </div>

            <div id="works">
                portfolio
                <button value="click"></button>
            </div>

            <div class="window">
                <div class="window-header">
                    <div class="action-buttons"></div>
                    <select class="language">
                        <option value="javascript" selected>JavaScript</option>
                        <option value="markup">HTML</option>
                        <option value="php">PHP</option>
                    </select>
                </div>
                <div class="window-body">
                    <textarea class="code-input">// Switch the language and put some code on me :)           ↑↑↑↑↑↑
// This is a 'Hello World' example.

function greetings(name){
    name = name || "stranger";
    return "Hello, " + name + "!";
}

window.onLoad = alert(greetings());</textarea>
                    <pre class="code-output">
                        <code class="language-javascript">

                        </code>
                    </pre>
                </div>
            </div>

            <div id="footer">
                mini-img-logo-here?
            </div>
        </div>
    </div>

    <script src="js/code-editor.js"></script>
</body>

您可以看到整页here (link)。

有：

没有标签未公开
无自动对焦字段

更改'content-wrapper'div显示属性会使页面在顶部打开，但是完全打破它，所以我认为问题在于这个div。

如何解决此问题并使页面在没有JavaScript ScrollTop解决方案的情况下像常规页面一样打开？

页面在打开时滚动到底部

0 个答案: