Question

所有...请参阅下面的代码......它几乎按我想要的方式工作。问题是没有滚动条。我可以通过两种方式解决它：

1）删除顶部的！doctype ...声明。然后它很棒，但我想我正在为自己创造悲伤。 2）将高度从相对量（％）改变为固定量（px）。我放入的任何高度都会导致滚动条返回...但是我的视图是固定大小的，并且在不同的窗口大小上不会改变。想法？

<!doctype html>
<html>
<head>
    <style type="text/css">
        body {
            overflow: hidden;
        }
        #Content {
            overflow: auto;
            float: left;
            width: 50%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="Content">
        Yesterday<br />Today<br />Tomorrow<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41<br />42<br />43<br />44<br />45<br />46<br />47<br />48<br />49<br />
    </div>
    <div id="Content">
        Yesterday<br />Today<br />Tomorrow<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41<br />42<br />43<br />44<br />45<br />46<br />47<br />48<br />49<br />
    </div>
</body>
</html>

Answer 1

滚动条已显示在body，您设置了overflow: hidden;。删除它。

Answer 2

height:100%;上的

#content仅在父元素具有设置高度时才有效，<body>最初不具有。如果您希望它工作，请将<body>及其父级<html>的高度设置为100％：

 body,html {
     height:100%;
     overflow: hidden;
 }

JSFiddle Demo

另外，正如@putvande指出的那样，id必须是唯一的。请改为使用班级：<div class="Content">

Answer 3

你身上有overflow-hidden删除它，它会没事的。

<!doctype html>
<html>
<head>
    <style type="text/css">
        #Content {
            overflow: auto;
            float: left;
            width: 50%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="Content">
        Yesterday<br />Today<br />Tomorrow<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41<br />42<br />43<br />44<br />45<br />46<br />47<br />48<br />49<br />
    </div>
    <div id="Content">
        Yesterday<br />Today<br />Tomorrow<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41<br />42<br />43<br />44<br />45<br />46<br />47<br />48<br />49<br />
    </div>
</body>
</html>

在html

3 个答案:

JSFiddle Demo