Question

所以，我正在建立一个网站，当宽度缩小时，它开始看起来非常高兴。我想这样做，所以部分的宽度保持不变，你只需使用水平滚动来移动。我希望这是有道理的。

HTML5：

<!DOCTYPE html>
<html lang = "en"> 
<head>
    <title>Welcome to Alpha Kits!</title>
    <meta charset = "utf-8"/>

    <link rel = "stylesheet" href = "style.css" type = "text/css"/>
</head>

<body class = "body">
    <header class =  "mainheader">
        <!Temp Logo><img src = "maxresdefault_2.png">
        <meta charset = "UTF-8">

        <nav><ul>
            <li><a href = "index.html">Home</a></li>
            <li><a href = "staffmembers.html">Staff Members</a></li>
            <li><a href = "forums.html">Forums</a></li>
            <li><a href = "photovideo.html">Photos & Videos</a></li>
            <li><a href = "donate.html">Donate</a></li>
        </ul></nav>
    </header>

    <div class = "maincontent">
        <div class = "content">
            <article class = "topcontent">
                <header>
                    <h2><p>Welcome to Alpha Kits!!!</p></h2>
                </header>

                <footer>
                    <p class = "post-info">This post was written by Doctor__Redstone</p> 
                </footer>

                <content>
                    <p>Doctor__Redstone has a small eye</p>
                </content>
            </article>

            <article class = "bottomcontent">
                <header>
                    <h2><p>Forum Rules</p></h2>
                </header>

                <footer>
                    <p class = "post-info">This post was written by syndicatebuddy01</p> 
                </footer>

                <content>
                    <p>syndicatebuddy01 has a smaller eye</p>
                </content>
            </article>
        </div>
    </div>

    <aside class = "top-sidebar">
        <article>
            <h2>Top Sidebar</h2>
            <p>Something will go here eventually</p>
        </article>
    </aside>

        <aside class = "bottom-sidebar">
        <article>
            <h2>Bottom Sidebar</h2>
            <p>Something will go here eventually</p>
        </article>
    </aside>

    <footer class = "main-footer">
        <p>Copyright &copy;Nathan (CFH_Games) http://www.youtube.com/CfHgAmEs</p>
    </footer>
</body>
</html>

CSS3：

body {
    background-image: url('background.jpg');
    color: #000305;
    font-family: Arial; 
    line-height: 1.5;
    text-align: left;
}

a {
    text-decoration: none;
}

a:link, a:visited {
    color: #0000A0;
}

a:hover, a:active {
    background-color: #0000A0;
    color: #FFFFFF;
}

.body{
    margin: 0 auto;
    width: 70%;
    clear: both;
}

.mainheader img {
    width: 100%;
    height: auto;
    margin: 2% 0;
}

.mainheader nav {
    background-color: #FFFFFF;
    background-image: url('dirt.png');
    font-weight: bold;
    font-family: "MineCrafter 3 Regular";
    font-size: 100%;
    text-shadow: 3px 0 0;
    height: 40px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainheader nav ul {
    list-style: none;
    margin: 0 auto;
}

.mainheader nav ul li {
    float: left;
    display: inline;
    font-style: bold;
}

.mainheader nav a:link, .mainheader nav a:visited {
    color: #FFFFFF;
    display: inline-block;
    padding: 10px 25px; 
    height: 20px;
}

.mainheader nav a:hover, .mainheader a:active, .mainheader nav .active a:link, .mainheader nav .active a:visited {
    background-color: #0000A0;
    text-shadow: none;
    color: #FFFFFF;
} 

.mainheader nav ul li a {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
} 

.maincontent {
    line-height: 20px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.content {
    width: 70%;
    float: left;
}
.topcontent{
    background-color: #FFFFFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 3% 5%;
    margin-top: 2%;
}

.topcontent header h2 {
    color: #0000A0;
    font-family: "MineCrafter 3 Regular";
}

.bottomcontent{
    background-color: #FFFFFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 3% 5%;
    margin-top: 2%;
}

.bottomcontent header h2 {
    color: #0000A0;
    font-family: "MineCrafter 3 Regular";
}

.top-sidebar {
    width: 21%;
    float: left;
    background-color: #FFFFFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 1.3% 0 1.3% 3%;
    padding: 2% 3%;
}

.top-sidebar article h2 {
    color: #0000A0;
    font-family: "MineCrafter 3 Regular";
    font-size: 140%
}

.post-info {
    font-style: italic;
    color: #999;
    font-size: 85%;
}

.bottom-sidebar {
    width: 21%;
    float: left;
    background-color: #FFFFFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 1.3% 0 2% 3%;
    padding: 2% 3%;
}

.bottom-sidebar article h2 {
    color: #0000A0;
    font-family: "MineCrafter 3 Regular";
    font-size: 140%;
}

.main-footer {
    width: 94%;
    height: 40px;
    float: left;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #FFFFFF;
    margin: 2% 0;
    padding: 0 3%
}

.main-footer p {
    width: 92;
    margin: 1% auto;
    color: #0000A0;
}

Answer 1

不建议这样做（Google“响应式设计”及其相关主题，但原因如此），但它应该像向width添加body一样简单：

body {
    width: 980px
}

Answer 2

如果你想要的话，任何东西都应该是大小不变的，所以在px中使用不是％。百分比根据主区域的整体大小自动重新调整内容大小。

如何使HTML5页面具有恒定的宽度？

2 个答案: