Question

一切看起来都很好（宽度是屏幕的100％），直到我将页面的高度增加到大于屏幕的高度。之后，宽度增加到1925像素，即使屏幕分辨率为1920px screenshot。请帮忙，我现在不要复制代码，因为问题可能在任何地方

HTML：

<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300italic,300,400italic,500,500italic,700&subset=latin,latin  -ext' rel='stylesheet' type='text/css'>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <title></title>
</head>
<body style="background-color: #f3f3f3; margin: 0; padding: 0;">
    <div id="topbar_bg">
        <div id="topbar_content">
            <img src="C:\Users\User\Dropbox\+HOROS code\img\logo.png"; style="margin-top: 18px">
            <ul id="menu">
            <li>PASLAUGOS</li>
            <li>APIE MUS</li>
            <li>DRAUGAI</li>
            <li>BLOGAS</li>
            <li>KONTAKTAI</li>
            </ul>
            <ul id="social">
            <li><img src="C:\Users\User\Dropbox\+HOROS code\img\fb.png"></li>
            <li><img src="C:\Users\User\Dropbox\+HOROS code\img\twitter.png"></li>
            <li><img src="C:\Users\User\Dropbox\+HOROS code\img\g+.png"></li>
            <li><img src="C:\Users\User\Dropbox\+HOROS code\img\yt.png"></li>
            </ul>
            <Div style="position: relative; margin-top: -70px;">
            <ul id="kalbos"><li style="color: #ecb315">LT</li><li>EN</li>
            </div>
        </div>
    </div>
    <div id="Pradinis">
        <img src="C:\Users\User\Dropbox\+HOROS code\img\akvedukas.png" style="box-shadow: 0px 1px #dcdcdc; margin-top: -7px;">
        <div id="PradinisContent">
            <div id="slogan">
                <p>From Possibility <br /> to Reality</p>
            </div>
            <div id="intro">
                <h1>HOROS</h1>
                <p>Human Resources Solutions</p>
            </div>
        </div>
    </div>
    <div id="Paslaugos">
        <div id="paslaugosContent">
            <p class="Pavadinimas">HOROS siūlo šias paslaugas:</p>
        </div>
    </div>
</body>

CSS：

http://pastebin.com/UxCrT4MR

Answer 1

滚动条导致显示区域小于实际页面大小。

很高兴看到您的代码，它肯定会让更多人帮助您了解您的代码实现方式。

我的猜测是你需要删除1920px的固定像素宽度并将其设置为100％，或者更像桌面屏幕，如960px。

Answer 2

当您增加高度时，会出现一个垂直滚动条，以便您查看整个页面。由于宽度也是100％，因此也会出现水平滚动条，以补偿垂直滚动条的宽度。

Answer 3

使宽度响应而不是用

修复

@media

当我将高度增加到大于屏幕高度时，HTML文档宽度超过100％

3 个答案: