我只想滚动内容

This code在Chrome中可以正常工作，但不能在IE或Firefox中使用。为了更清楚并且满足关于评论代码比率的SO约束，我希望只有当视口低于300px或内容根本不适合时，内容区域才能滚动。其实IE是我唯一关心的问题。我如何在IE> = v10下实现相同的行为。我只想滚动内容

* { 
 
    font-family: Helvetica, Sans; 
 
    border: 0px; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 
#table { 
 
    display: table; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.navBar { 
 
    width: auto; 
 
    height: 72px; 
 
    overflow: auto; 
 
    border-bottom: 1px solid #bbb; 
 
    display: table-row; 
 
} 
 
.results { 
 
    background: gray; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: auto; 
 
    display: table-row; 
 
} 
 
.results > div { 
 
    height: 100%; 
 
    overflow: auto; 
 
} 
 
@media screen and (max-height: 300px) { 
 
    footer { 
 
    display: none; 
 
    } 
 
}

<body> 
 
    <div id="table"> 
 
    <div class='navBar'>header</div> 
 
    <div class='results'> 
 
     <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus sem quam, quis finibus leo pretium sit amet. Sed imperdiet venenatis enim at sagittis. Praesent porta purus nec aliquet pellentesque. Nunc bibendum urna non risus lacinia, at 
 
     venenatis nisl interdum. Duis porta tristique augue vel dictum. Curabitur feugiat tincidunt risus eget semper. Aliquam quis cursus nibh, feugiat commodo arcu. Aliquam non dolor vel ex dapibus interdum vitae nec lorem. Phasellus fermentum neque 
 
     ut nibh hendrerit tempus. Pellentesque sit amet ligula dui. Donec laoreet est erat. Etiam aliquet sem sit amet quam tempus aliquam. Vivamus eleifend nunc ipsum, a viverra neque efficitur at. Duis mi nisl, accumsan quis ex et, aliquam lobortis 
 
     lectus. Vestibulum luctus diam eu mattis gravida. Quisque nisi felis, posuere vitae purus sit amet, pellentesque fermentum enim. Proin eu dui ex. Nunc nec erat sed augue rhoncus gravida. Suspendisse potenti. Pellentesque mattis lorem felis, a 
 
     venenatis odio gravida eget. Nam dictum dui efficitur pellentesque feugiat. Aliquam quis velit sit amet nibh rhoncus lacinia. Ut sed aliquet odio. Phasellus ut eros a nulla viverra convallis aliquet vel risus. Integer eu tellus congue, sodales 
 
     leo et, placerat nisi. Quisque semper bibendum tortor. Maecenas sed est sit amet neque convallis lacinia. Praesent vitae dapibus nibh, accumsan lobortis velit. Mauris sed imperdiet lectus. Nunc est turpis, lobortis sit amet hendrerit eu, eleifend 
 
     sed dui. Vivamus vulputate semper elit, vitae finibus metus mollis sed.</div> 
 
    </div> 
 
    <footer>footer</footer> 
 
    </div> 
 
</body>

来源

2015-01-21 apreg

媒体查询，不支持[以下IE8（ http://caniuse.com/#feat=css-mediaqueries），但你可能会做一个媒体查询，检查你的视口，并设置overflowY：滚动？这样你就可以加强这一点。我还想指出*选择器是非常糟糕的做法 - 尝试将这些规则放入您的** html，body **规则中。 – jbutler483 2015-01-21 12:16:53

谢谢你的提示。幸运的是，我不必关心低于10的IE版本。关于代码的事情是我从[这里]复制它（http://stackoverflow.com/questions/27164889/vertical-div-expansion-wo-fixed-heights）并修改了一点点： – apreg 2015-01-21 12:20:04

-2

有写css用于IE

IE-6 ONLY

* html #div { 
    height: 300px; 
}

IE-7 ONLY

*+html #div { 
    height: 300px; 
}

的方式

IE-8 ONLY

#div { 
    height: 300px\0/; 
}

IE-7 & IE-8

#div { 
    height: 300px\9; 
}

NON IE-7 ONLY：

#div { 
    _height: 300px; 
}

从IE 6隐藏和LOWER：

#div { 
    height/**/: 300px; 
} 

html > body #div { 
     height: 300px; 
}

来源

2015-01-21 11:19:56 equerambug

什么*是*这个？以及它如何影响问题中提到的滚动？ – jbutler483 2015-01-21 11:58:23

这就是我要问:) – apreg 2015-01-21 12:00:25

以及我会建议，如果你想在IE上实现你的目标，那么你必须使用IE'css' – equerambug 2015-01-21 12:06:32

你是什么t hink？ Is it a solution?我上心从here

<div class="table"> 
<!-- Header --> 
<div class="row header">Header</div> 
<div class="row content"> 
    <!-- Use inner div's with position relative and absolute, to fix cell height, making it overflow correctly. --> 
    <div class="wrapper"> 
     <div class="inner-content"> 
      <input type="text" /> 
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus sem quam, quis finibus leo pretium sit amet. Sed imperdiet venenatis enim at sagittis. Praesent porta purus nec aliquet pellentesque. Nunc bibendum urna non risus lacinia, at venenatis nisl interdum. Duis porta tristique augue vel dictum. Curabitur feugiat tincidunt risus eget semper. Aliquam quis cursus nibh, feugiat commodo arcu. Aliquam non dolor vel ex dapibus interdum vitae nec lorem. Phasellus fermentum neque ut nibh hendrerit tempus. Pellentesque sit amet ligula dui. Donec laoreet est erat. Etiam aliquet sem sit amet quam tempus aliquam. Vivamus eleifend nunc ipsum, a viverra neque efficitur at. Duis mi nisl, accumsan quis ex et, aliquam lobortis lectus. Vestibulum luctus diam eu mattis gravida. Quisque nisi felis, posuere vitae purus sit amet, pellentesque fermentum enim. Proin eu dui ex. Nunc nec erat sed augue rhoncus gravida. Suspendisse potenti. Pellentesque mattis lorem felis, a venenatis odio gravida eget. Nam dictum dui efficitur pellentesque feugiat. Aliquam quis velit sit amet nibh rhoncus lacinia. Ut sed aliquet odio. Phasellus ut eros a nulla viverra convallis aliquet vel risus. Integer eu tellus congue, sodales leo et, placerat nisi. Quisque semper bibendum tortor. Maecenas sed est sit amet neque convallis lacinia. Praesent vitae dapibus nibh, accumsan lobortis velit. Mauris sed imperdiet lectus. Nunc est turpis, lobortis sit amet hendrerit eu, eleifend sed dui. Vivamus vulputate semper elit, vitae finibus metus mollis sed.</div> 
      <div>Some text.</div> 
     </div> 
    </div> 
</div> 
<!-- footer --> 
<div class="row footer">Footer</div>

html, body { 
height: 100%; 
max-height: 100%; 
padding:0px; 
margin:0px; 
} 
.table, .row { 
    outline: none; 
    border: none; 
    outline-style: none; 
    vertical-align: top; 
    text-align: left; 
} 
.table { 
    border-collapse: collapse; 
    display: table; 
    table-layout: fixed; 
    /* This will ensure the cells within the table will keep there width. */ 
    width: 100%; 
    height: 100%; 
} 
.row { 
    display: table-row; 
    width: 100%; 
} 
.header { 
    background-color: red; 
} 
.content { 
    height: 100%; 
} 
.footer { 
    background-color: green; 
} 
.wrapper { 
    position:relative; 
    height: 100% 
} 
.inner-content { 
    overflow: auto; 
    position: absolute; 
    top: 0; 
    right:0; 
    bottom: 0; 
    left: 0; 
} 
@media screen and (max-height: 300px) { 
    .footer { 
     display: none !important; 
    } 
}

来源

2015-01-21 19:39:08 apreg

我不完全相信你的“净含量面积为滚动”的意思。这是我对它的解释：

http://jsfiddle.net/5q1Lgsy6/11/

通过使用position: fixedwidth:100%顶栏就可以让这个只有在它下面的内容将是滚动的。

我放弃了所有display: table标签，除非该内容应该显示在实际表格中，否则您并不需要它们来组织您的内容。

这里的CSS：

* { 
    font-family: Helvetica, Sans; 
    border: 0px; 
    margin: 0px; 
    padding: 0px; 
} 
html, body { 
    height: 100%; 
} 
#table { 
    height: 100%; 
    width: 100%; 
} 
.navBar { 
    background-color: white; 
    top: 0; 
    width: 100%; 
    height: 72px; 
    border-bottom: 1px solid #bbb; 
    position: fixed; 
} 
.results { 
    margin-top: 72px; 
    background: gray; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
} 
.results > div { 
    height: 100%; 
    overflow: auto; 
} 
@media screen and (max-height: 300px) { 
    footer { 
     display: none; 
    } 
}

编辑：如果你也想页脚被永久固定添加到你的CSS：

footer { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    height: 20px; 
    background-color: white; 
}

来源

2015-01-21 21:14:43 Tiago

谢谢你的回答。请检查我的评论，看看我想达到什么。正如你所看到的，只有内容区域有一个滚动条。对不起，我的模糊措辞。 – apreg 2015-01-23 07:20:52

@apreg嗯，在我的最后没有滚动条，所以我真诚地不知道你想要什么。您是否希望浏览器的滚动条完全不出现，并单独为内容部分使用较小的滚动条？ – Tiago 2015-01-23 09:38:12

“您是否希望浏览器的滚动条完全不出现，并单独使用较小的滚动条作为内容部分？” - 确实，但我已经解决了它的一种方法。此问题与此相关：http://stackoverflow.com/questions/27057298/css-sticky-footer-header-with-scrollable-content。也许这会让我更加清楚自己的担忧。因此，我的第一篇文章中的代码做了我想要的，但只在Chrome中。我想要一个解决方案，但在IE中也是这样，因为我在Windows Phone上运行它。 – apreg 2015-01-23 10:32:32

我只想滚动内容

回答

相关问题