我只想滾動內容

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

我只想滾動內容

回答

相關問題