Question

我有一个非常简单的网页，但CSS中的某些内容会导致Chrome出现问题。基本上，如果内容超出了即时屏幕上呈现的内容，Chrome将无法向下滚动到该内容。内容和滚动在FF和IE中正常工作。我能够让Chrome显示内容（除了消除CSS）的唯一方法是将html{height: 100%;}更改为更高的值(200%)。显然这不是一个理想的解决方案。

HTML和CSS： http://cssdesk.com/Z3k52

浏览器：

Chrome 23.0.1271.91 // FF 16.0.2 // IE 9.0.8112.16421

我确信我只是遗漏了一些简单的东西，但我不知道是什么。

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">


<head>
    <title>Home Page</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link href="layout.css" rel="stylesheet" type="text/css" />
</head>


<body>
    <div id="container">
        <div id="box_margin">
            <div id="title">Some Title, Info, Etc.</div>

            <div id="link_nav">
                <div class="links"><a href="index.html">Home</a></div>
                <div class="links"><a href="links.html">Links</a></div>
                    <div class="links"><a href="about.html">About</a></div>
                <div class="links"><a href="contact.html">Contact</a></div>
            </div>

            <div id="contentbox">
                <div class="box_header">Home Screen</div>
                <div class="pagecontent">
                    <p>Text at the top</p>
                    <p>Next line</p>
                    <p>Next line</p>
                    </br>....
                    </br>....
                    </br></br></br></br>text continues below....</br></br></br></br></br></br></br></br>and can be scrolled to in FF/IE</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>o</br>o</br>o</br>o</br>o</br>\ /</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>....keep going....</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br><p>But not Chrome</p>
                </div>
                        <div id="footer">Here is the footer</div>
            </div>
        </div>
    </div>
</body>
</html>

CSS：

html
{
  height: 100%;
}

body
{
  height: 100%;
  margin: 0;
  padding: 0;
  line-height: 150%;
  text-align: center;
  font-size: 62.5%;
}

*
{
  font-size: 1em;
  font-family: Arial, Verdana, sans-serif;
  color: #000000;
  text-align: left;
}

#container
{
  margin: 0 auto 0 auto;
  display: table;
  height: 100%;
  position: relative;
  overflow: hidden;
  width: 600px;
}

.links
{
  width:75px;
  margin-right:10px;
  float: left;
  margin-top:24px;
  text-align:center;
  font-family:Georgia, "Times New Roman", Times, serif;
  position:relative; bottom:0px;
  color: #e1a630;
}

.links a{
  font-family:Arial, Helvetica, sans-serif;
  font-size:1.2em;
  font-weight:bold;
}

#link_nav
{
  margin-right:10px;
  height:40px;
  width:600px;
}

#title
{
  width:230px;
  height:40px;
  margin-right:20px;
  margin-top:15px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:2em;
  font-weight:bold;
  text-align:center;
  float:left;
}

.box_header
{
  font-family:Verdana, Arial, Helvetica, sans-serif;
  color:#002664;
  font-size:1.9em;
  margin-top:15px;
  margin-left:15px;
  margin-right:15px;
  margin-bottom:15px;
  width:573px;
}

.pagecontent
{
  font-family: Arial, Helvetica, sans-serif;
  color:#000000;
  font-size:1.2em;
  margin-left:20px;
  margin-right:20px;
  width:560px;
}

#contentbox
{
    position: absolute;
    vertical-align: middle;
    background-color:#5284CC;
    width:600px;
    clear:both;
}

#footer
{
  width:600px;
  height:20px;
  background-color:#5284CC;
  background-repeat:no-repeat;
  text-align:center;
  color:#BDCDEC;
}

#footer a
{
  font-size:.8em;
  color:#BDCDEC;
}

#box_margin
{
  margin-top:25px;
}

html, body {
  text-align: center;
}

p {text-align: left;}

Answer 1

我在此编辑了您的代码：demo

html{
      height: 100%; /* must be remove  */
}


body{
      height: 100%; /* must be remove  */
}

你的错误在于设置身高并设置overflow : hidden。

Answer 2

请勿更改#container元素的显示属性和位置。

以下代码适用于chrome和firefox。没有在IE上测试，因为我在Mac上，但我很确定它有效。

#container
{
  margin: 0 auto;
  overflow: hidden;
  width: 600px;
}

http://cssdesk.com/tyCdB

Chrome无法使用CSS呈现整页（适用于FF / IE）

2 个答案: