Question

我不希望能够从左到右滚动页面。我希望我的页面看起来像完全向左滚动时的样子。我试过让身体宽度达到100％，但我不确定这是我应该做的。

＆＃13;

<!doctype html>
<html>

<head>
    <title>Noam's BBC</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
   <style type="text/css">
        
       body{
        margin: 0;
        background-color: white;
        font-family: Arial,Helvetica,freesans,sans-serif;
        overflow: scroll;
        width: 1400px; 
        }
       
       #topbar {
        background-color:#FFFFFF;
        width: 100%;
        height: 40px;
        color: black;
        border-bottom: 1px solid #CCCCCC;
        }
        
       .fixedwidth {
        width: 100%;
        margin:0 auto;
        }
       
       #logodiv img {
        width: 5.1875em;
        height: 1.4375em;
       }
       
       #logodiv {
        padding-top: 8.5px;
        padding-left: 80px;
        float: left;
        border-right: 1px solid #CCCCCC;
        padding-right: 10px;
        height: 31px;
       }
       
       #signindiv img {
        width: 1.46470588em;
        height: 1.2075em;
        position: relative;
        top: 2px;
       }
       
       #signindiv {
        font-weight: bold; 
        font-size: 0.9em;
        padding: 10px 0 10px 20px;
        float: left;
        width: 150px;
        border-right: 1px solid #CCCCCC;
       }
       
       #topmenudiv {
        float: left;   
       }
       
       #topmenudiv ul {
        margin-top: 0;
        padding: 0;
       }
       
       #topmenudiv li {
        list-style: none;
        font-weight: bold;
        font-size: 0.9em;
        padding: 14px 20px 10px 20px;
        height: 100%;
        border-right: 1px solid #CCCCCC;
        float: left;
       }
       
       #searchdiv {
        float: left;
        padding: 7px 0 0 10px;
       }
       
       #searchdiv input {
        height: 24px;
        position: relative;
        border: none;
        width: 100%;
        background-color: #e4e4e4;
        font-family: Arial,Helvetica,freesans,sans-serif;
        font-weight: bold;
        font-size: 0.9em;
        padding-left:10px;
        background-image: url("images/magnify.png");
        background-repeat: no-repeat;
        background-position: right center;
        background-size: 30px 24px;
       }
       
       .break {
        clear: both;   
       }
       
       #newsbar {
        background-color:#BB1919;
        width: 100%;
        height: 95px;
        color: black;
        }
       
       #newsbar p{
        padding-left: 80px !important;
        margin: 0;
        padding: 5px 0 0 6px;
        color: white;
       }
       
       #newsheader{
        font-size: 2.7em;
       }
       
       #topicmenu {
           
       }
       
       #topicmenu ul {
        background-color: #A91717;
        padding: 5px 0 0 70px;
        margin-top: 7px;
        height: 29px;
        
       }
       
       #topicmenu li {
        list-style: none;
        float: left;
        background-color: none;
        border-right: 1px solid #BB4545;
        padding: 0 10px 0 10px;
        margin-top: 4px; 
        color: white;
       }
       
       #white{
        border-bottom: 4px solid white; 
        border-right: none !important;
        margin-top: 7px !important;
       }
       
       #nextToWhite{
        border-left: 1px solid #BB4545;
       }
       
       #moveUp{
        margin-top: -1px;
        margin-bottom: 1px;
       }
       
       #locationbar ul{
        background-color: none;
        height: 35px;
        width: 911px;
        padding: 7px 81px 0 75px;
        margin: 5px 136px 0 0px;
       }
       
       #locationbar li{
        list-style: none; 
        float: left;
        padding: 0 12px 0 12px;
        font-family: inherit;
        border-right: 1px solid #DCDCDC;
        font-size: 0.9em;
       }
       
       #selectedlocation{
        font-weight: bold;
        font-size: 1.1em !important;
        border-right: none !important;
        margin-top: -2px;
        border-bottom: 4px solid #BB1919;
        padding-left: 8px !important;
       }
       
       #nextToUkLocation{
        border-left: 1px solid #DCDCDC;
       }
       
       #primarycolumn{
        background-color: cornflowerblue;
        width: 100%;
        padding-left: 80px;
       }
    </style>
    
</head>

<body>
    
    <div id="container">
        
        <div id="topbar">
            
            <div class="fixedwidth">
                
                <div id="logodiv">
                    <img src="images/bbclogo.png" />
                </div>
            
                <div id="signindiv">
                    <img src="images/signin.png" /> Sign In
                </div>
            
                <div id="topmenudiv">
                
                <ul>
                    <li>News</li>
                    <li>Sport</li>
                    <li>Weather</li>
                    <li>Shop</li>
                    <li>Earth</li>
                    <li>Travel</li>
                    <li>More...</li>
                </ul>
                    
                </div>
                
                <div id="searchdiv">
                    <input type="text" placeholder="search"/>
                </div>
                
            </div>
            
        </div>
        
        <div class="break"></div>
        
         <div id="newsbar">
            
            <div class="fixedwidth">
                <p id="newsheader">NEWS</p>
            
            
             <div class="break"></div>
             
             <div id="topicmenu">
                 
                <ul>
                    <li>Home</li>
                    <li>Video</li>
                    <li>World</li>
                    <li>US &amp; Canada</li>
                    <li id="white">
                        <div id="moveUp">UK</div></li>
                    <li id="nextToWhite">Business</li>
                    <li>Tech</li>
                    <li>Science</li>
                    <li>Magazine</li>
                    <li>Entertainment &amp; Arts</li>
                    <li>Health</li>
                    <li style="border-right:none">More</li>
                 </ul>
                 
             </div>
             </div>
        </div>
        
        <div class="break"></div>
        
        <div id="locationbar">
            <div class="fixedwidth">
                <ul>
                    <li id="selectedlocation">UK</li>
                    <li id="nextToUkLocation">England</li>
                    <li>N. Ireland</li>
                    <li>Scotland</li>
                    <li>Wales</li>
            <li style="border-right: none">Politics</li>
                 </ul>
            </div>
        </div>
        
        <div class="break"></div>
        
        <div id="primarycolumn">
            
           <div class="fixedwidth"> 
               
        <h2>UK to accept 'thousands' more refugees</h2>
               
               <img src="images/headlineimage.jpg" />
               
            </div>
            
        </div>    
        </div>
    </div>
    
</body>
</html>

＆＃13;

Answer 1

虽然你的造型有许多根本缺陷，如果你想要实现的只是防止水平滚动，那么这应该就足够了： -

替换

overflow: scroll;

in - ＆gt; body {} to

overflow-y: scroll;
overflow-x: hidden;

因此，正文样式更改为

body{
    margin: 0;
    background-color: white;
    font-family: Arial,Helvetica,freesans,sans-serif;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 1400px; 
    }

Answer 2

尝试使容器宽度：100％。然后以百分比形式给出容器内元素相对于容器的宽度和位置值。希望它能起作用

如何将页面限制为完整的浏览器宽度？

2 个答案: