Question

当用户缩小他/她的浏览器时，我试图让我的网页显示为水平滚动条，但是所有东西都缩小了，但这不是我想要的方式，我已经尝试了很多东西（如溢出等）这里是我的网站（尝试调整大小）： http://prepaestatal9.site11.com/news.php 这是html代码：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>

        <link rel="shortcut icon" href="images/favicon.ico">
        <link href="styleregistration.css" rel="stylesheet">

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>



<body>

     <div id="mainBlank">

         <h1 style="text-align: center;">Noticias</h1>

        <div id="refresh"><table style="width:50%;"><tr><td colspan='2' style='background-color:#f96267;'>no se</td></tr><tr><td style='background-color:#bde0e4;'>no  importa</td> <td style='background-color:#bde0e4;'>2014-01-02 19:22:38</td></tr><tr><td colspan='2' style='background-color:#885878; text-align:center;'>nueva noticia<br />
no hay clase</td></tr><tr style='height:40px; border-left:none;'></tr><tr><td colspan='2' style='background-color:#f96267;'>yoooo</td></tr><tr><td style='background-color:#bde0e4;'>dssd</td> <td style='background-color:#bde0e4;'>2014-01-02 19:16:39</td></tr><tr><td colspan='2' style='background-color:#885878; text-align:center;'>ds<br />
ds</td></tr><tr style='height:40px; border-left:none;'></tr><tr><td colspan='2' style='background-color:#f96267;'>hih</td></tr><tr><td style='background-color:#bde0e4;'>bhj</td> <td style='background-color:#bde0e4;'>2014-01-02 19:16:12</td></tr><tr><td colspan='2' style='background-color:#885878; text-align:center;'>ft<br />
yf<br />
yt</td></tr><tr style='height:40px; border-left:none;'></tr></table></div>            
    </div>


    </body>
</html>

一个名为mainBlank的div内部的简单表格

这里是css代码
styleregistration.css

@font-face
{
font-family: yano;
src: url(fonts/yano.woff);
}

body {

    width: 100%;
    font-family:yano;
    background-image: url(images/dirtyred.png);
    background-repeat:repeat;
    position:relative;
    margin: 0;
}

#mainBlank{

    border-radius:5px;
    background-image: url(images/word.png);
    -moz-box-shadow:    10px 10px 5px #888888;
    -webkit-box-shadow: 10px 10px 5px #888888;
    box-shadow:         10px 10px 5px #888888;
    margin-left: 10%;
    margin-right: 20%;
    margin-top: 15%;
    /*margin-bottom: 1%;*/
    height: 30%;
    color: black;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 1%;
    padding-right: 1%;
}

并感谢您的帮助。

Answer 1

您正在以浏览器大小的百分比来完成所有操作。你的边距是左，右等，甚至是你的高度。

它看起来不错，但一切都只是浏览器宽度的百分比。因此，当您调整大小时，其他所有内容也会调整大小。没有人能真正给你特定的代码，因为你是你网站的设计者。尝试提供#mainBlank

width:700px;
margin:auto;

并删除所有边距和填充值。从那里调整。

Answer 2

我建议尝试@Adonis K提供的解决方案。

overflow-y: scroll

强制垂直滚动条。

就是这种情况，我会认为

overflow-x: visible

可以用于水平虽然我没有使用它（我相信没有水平滚动条因为美学）

如果不起作用，请尝试

overflow-x: scroll

或者

html {
overflow-x: scroll;
}

或

html {
overflow-x: visible;
}

Answer 3

你应该使用overflow-x：

#mainBlank {
    overflow-x: visible;
}

“溢出CSS属性指定是否剪辑内容，渲染滚动条或显示块级元素的溢出内容。”

Documentation | Demo

另一个解决方案是使用静态宽度，如@smts提及，但不是只是一个静态值，你可以使用这样的东西：

#mainBlank {
    width: 700px;
    margin: auto;
    max-width: 100%;
}

这样，如果元素的宽度大于屏幕的宽度，那么它将缩小到屏幕的最大宽度。

html - 在浏览器缩小时设置水平滚动条

3 个答案: