css設置高度height: 100%滾動條無法顯示的解決辦法

是在寫樣式的時候，會碰到給div無論怎么加樣式 overflow-y: auto 的時候，都不會出現垂直的滾動條，經過不斷折騰終于知道是啥原因導致了。

<style>
body{
height: 100%; //若是所有的div的高度都不固定，需要body高度也是100%，才可以出現滾動條
}
.parent{
//你自己樣式
height: 100%; //父元素的高度也需要是100%才可以出現滾動條
}
.children{
overflow-y: auto;
overflow-x: hidden;
height: 100%;
}
</style>

<div class="parent">
<div class="children">
xx-blog主題
xxzhuti主題網
</div>

處：https://www.cnblogs.com/huangenai/p/9717964.html

vue 解決無法設置滾動位置的問題

問題描述

在實現錨點定位的時候發現無法設置滾動條的位置。

在Vue中，使用 document.body.scrollTop=952 無法設置滾動條的高度。

document.body.scrollTop一直是0

原因

因為vue的頁面指定了DTD，即指定了DOCTYPE時，使用document.documentElement。

頁面沒有DTD，即沒指定DOCTYPE時，使用document.body。

解決方案

document.documentElement=956

2018年10月10號新增

上面僅僅是說這個頁面的滾動條高度的設定，當我頁面內的一個div的滾動條設定他的高度如下解決方案

var anchor = this.$el.querySelector('.message-list')
 this.$nextTick(() => {
 document.querySelector('.message-list').scrollTop = anchor.scrollHeight
 })

這個解決方案在我做ng的時候又出現過類似的問題，我前大佬告訴我的，當時只是為了解決問題并沒有了解其原理，復制進來就過去了。

現在做vue了，才知道哦，為什么要這樣寫，所以說項目太趕，只是為了完成任務，對個人能力并沒有提升，做完了就過了，還要解決其他的bug，其他的任務，現在能夠靜下來在工作過程中學習+進步，對個人的發展才是好的。工作不僅僅是工作完成任務，是一個自己發現自身問題，提升能力和對自己的技術實操實踐的過程。

對前端的技術，架構技術感興趣的同學關注我的頭條號，并在后臺私信發送關鍵字：“前端”即可獲取免費的架構師學習資料

知識體系已整理好，歡迎免費領取。還有面試視頻分享可以免費獲取。關注我，可以獲得沒有的架構經驗哦??！

在Firefox中單獨設置滾動條樣式，你可以使用?@-moz-document??規則。這個規則允許你為特定的瀏覽器或瀏覽器引擎應用樣式。

下面是一個例子，演示如何在Firefox中隱藏滾動條：

@-moz-document url-prefix() {
  /* 在這里添加只對Firefox生效的樣式 */
  body {
    scrollbar-width: none;
  }
}

在上面的例子中，??@-moz-document url-prefix()??表示只有在URL以空字符串（即所有URL）為前綴的情況下，才會應用其中的樣式。在??body??元素中，??scrollbar-width: none;??將隱藏滾動條。

請注意，這樣的規則只在Firefox中生效，而在其他瀏覽器中會被忽略。確保在使用這樣的規則時進行測試，以確保所需的效果在目標瀏覽器中按預期工作。

在CSS中，??*???（星號）和 ??body?? 分別選擇不同的元素或元素集合。

*?（星號）選擇器：這是通配符選擇器，匹配文檔中的所有元素。使用 * 會選擇頁面上的每個元素，無論是塊級元素、行內元素還是其他類型的元素。例如：

* {
  margin: 0;
  padding: 0;
}

上述代碼會將頁面中所有元素的內外邊距設置為零。

body? 選擇器： 這是針對文檔的 <body> 元素的選擇器。body 選擇器用于針對整個文檔的主體部分應用樣式。例如：

body {
  font-family: 'Arial', sans-serif;
  background-color: #f0f0f0;
}

上述代碼會將文檔主體部分的字體設置為 Arial，并將背景顏色設置為 #f0f0f0。

所以，??*??? 是一個通用的選擇器，匹配所有元素，而 ??body??? 是特定于文檔主體的選擇器，用于選擇文檔主體元素并應用樣式。在某些情況下，你可能希望使用 ??body?? 選擇器，以更有針對性地影響文檔的主要內容區域。

在最新的 Firefox 版本中，??-moz-scrollbar-thumb?? 偽類選擇器已被棄用，取而代之的是使用更通用的 CSS Scrollbar 模塊規范。為了在 Firefox 中優化滾動條并使其變細，你可以使用新的規范中的屬性。

以下是一個簡單的示例，可以使 Firefox 中的滾動條變細：

/* Firefox 滾動條樣式 */
* {
  scrollbar-width: thin;
  scrollbar-color: #999999 #f0f0f0;
}

/* Webkit 滾動條樣式（Chrome, Safari等）*/
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-thumb {
  background-color: #999999;
}

*::-webkit-scrollbar-track {
  background-color: #f0f0f0;
}

上述樣式包含兩部分：

??scrollbar-width?? 和 scrollbar-color 是 Firefox 滾動條樣式的屬性。scrollbar-width: thin; 會使滾動條變細，而 scrollbar-color 用于定義滾動條的顏色。在這里，滾動條顏色被設置為灰色 (#999999)，滾動條軌道的顏色被設置為淡灰色 (#f0f0f0)。
對于 Webkit 內核的瀏覽器（如 Chrome 和 Safari），使用 ::-webkit-scrollbar、::-webkit-scrollbar-thumb 和 ::-webkit-scrollbar-track 來定義滾動條樣式。

請注意，滾動條樣式在不同瀏覽器中可能會有所不同，因此上述樣式在 Firefox 中有效，而 Webkit 樣式在 Chrome 和 Safari 中有效。在實際使用中，你可能需要根據需要進行調整和測試，以確保在不同瀏覽器中都能達到預期的效果。

在線咨詢

上一篇：PoisonTap-虹吸cookie，暴露內部路由器并在已鎖定的計算機上安裝Web后門
下一篇：在HTML頁面中嵌入其他頁面的方法-零基礎自學網頁制作

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

css設置高度height: 100%滾動條無法顯示的解決辦法

vue 解決無法設置滾動位置的問題

您的項目需求