代码之家 › 专栏 › 技术社区 › n8wrl

CSS 100%宽度,但避免滚动条

css

n8wrl · 技术社区 · 14 年前

这可能是一个变种的东西已经解决了几十次,但CSS真的让我觉得自己像个傻瓜。

我试图建立一个小部件,可以定位和大小的各种方式。这是一个非常简单的布局-固定高度的页眉,固定高度的页脚,以及占用剩余空间的正文。总宽和总高各不相同。正文的内容需要滚动。我有整体容器,页眉,页脚,和身体大小确定。

但我想要的是身体滚动时,它需要没有收缩内容到左边时,滚动条出现。也就是说,我希望主体尽可能宽,减去滚动条,如果它需要滚动的话,滚动条就在那里,这样当它确实需要滚动的时候就没有收缩。实际上,我想要:

| - - - unknown width - - -|
+--------------------------+
| content                |*|
| might                  |*|
| scroll                 |*|
+--------------------------+

我希望可以滚动的内容尽可能宽,减去可能的滚动条宽度(|*|区域)。

我现在拥有的是这样的东西:

<div id="content" style="position: absolute; overflow-y: auto; width: 100%">
    <div id="scrollContent" style="???">
    </div>
</div>

5 回复 | 直到 14 年前

casablanca 14 年前

使用 overflow: scroll 而不是 overflow: auto

mowwwalker 4 年前

The answer by Mattias Ottosson 另一个问题提供了一个关键信息 vw 滚动条,而百分比将基于可用宽度不 calc(100vw - 100%)

如果我们有一个顶级的元素 100%

.app {
  display: grid;
  grid-template-columns: 1fr 50vh 1fr;
}

我们希望中间列的宽度为视口高度的50%,其余的宽度在左右列之间划分。如果我们使用了这个功能,那么添加一个滚动条意味着滚动条丢失的水平空间(在chrome上大约是15px)将从左右列的宽度中平均去掉。当ui更改导致滚动条出现而网格中的主要内容保持相同或相似时,这可能会导致丑陋的移动。请参见下面的第一个片段。

.app {
  display: grid;
  grid-template-columns: calc((100vw - 50vh)/2) 50vh calc(100% - (50vh + 100vw)/2);
}

请参见下面的第二个片段。不幸的是,这意味着 fr 不能使用单位,必须手动指定列的宽度。在这种情况下,左列的宽度是视口宽度减去 50vh 可用宽度 ( 而不是 100vw

calc(100% - ((100vw - 50vh)/2) - (50vh))

减少到上面的一个

$('button').click(() => {
  $('.footer').toggle()
})

body, html {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: auto;
  font-family: 'Archivo', sans-serif ;
}
.app {
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 50vh 1fr;
  text-align: center;
  height: 100%;
  width: calc(100% - 10px);
}
.left-column, .center-column, .right-column {
  padding: 10px;
  min-height: 50vh;
  border: 1px solid black;
}
.left-column {
  border-right: none;
  background-color:#def;
}
.center-column {
  background-color:#e1ebbd;
}
.right-column {
  text-align: left;
  border-left: none;
  background: #fb1;
}
.footer {
  grid-column: 1 / span 3;
  height: 2000px;
  background: #753;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>
  <div class="app">
    <div class="left-column">
      Left
    </div>
    <div class="center-column">
      Center
<script src="https://code.jquery.com/jquery-3.1.0.js"></script><br>
      <button>Toggle footer</button>
    </div>
    <div class="right-column">
      Right
    </div>
    <div class="footer">
 </div>
  </div>
</body>
</html>

$('button')。单击(()=>{
$('.footer').toggle()

body, html {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: auto;
  font-family: 'Archivo', sans-serif ;
}
.app {
  margin: auto;
  display: grid;
  grid-template-columns: calc((100vw - 50vh)/2) 50vh calc(100% - (50vh + 100vw)/2);
  text-align: center;
  height: 100%;
  width: calc(100% - 10px);
}
.left-column, .center-column, .right-column {
  padding: 10px;
  min-height: 50vh;
  border: 1px solid black;
}
.left-column {
  border-right: none;
  background-color:#def;
}
.center-column {
  background-color:#e1ebbd;
}
.right-column {
  text-align: left;
  border-left: none;
  background: #fb1;
}
.footer {
  grid-column: 1 / span 3;
  height: 2000px;
  background: #753;
}

<!DOCTYPE html>
<头部>
<meta charset=“utf-8”>
<脚本src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script>

<车身>
<div class=“left column”>
左
</div>
<div class=“中柱”>
居中
<脚本src=“https://code.jquery.com/jquery-3.1.0.js“></script><br>
</div>
<div class=“右列”>
赖特
<div class=“footer”>
</div>
</body>

Stuart Burrows 14 年前

在将具有溢出:自动样式把它调窄18像素。滚动条应该出现在18px的间隙中。

Arseni Mourzenko 14 年前

为什么不总是显示滚动条,即使不需要滚动?

您可以通过设置 overflow:scroll; 去集装箱。

jek 11 年前

我有一个问题,是类似的,我用下面的解决方案,我不知道这是否可以解决你想做的事,但它可以。

我有一个div,它可以自动调整到内容大小,然后添加滚动条,缩小内部,这样表中的文本就可以被包装,而不是使容器变得更宽。如果textarea向下调整大小并显示滚动条,则在下面的旧示例中可以看到不需要的效果。

我丑陋的解决方案是在overflow-y中添加一个div:auto-div,这已经发生了显示:内联块,然后再添加一个小的内联块div,它是19像素宽(为scrollbar保留)和1像素高。当浏览器根据内容调整div的大小时,小div会出现在真实div的旁边,当滚动条出现时,小div会被压到真实div的下面,而真实div会保持不变。这将导致一个像素的底部“边距”,但希望不是一个问题。当没有滚动条出现时,实际div旁边有19个像素的未使用空间,如问题中所述。

(最外层的div只是复制我的设置/问题。)

旧的:

<div style="display:inline-block">
  <div style="max-height:120px; overflow-y:auto; border:1px solid gray">
    <table border=1><tr>
       <td>I do not</td><td>want this to</td>
       <td>add breaks in the text.</td>
    </tr></table>
    <textarea rows=3 cols=15>Resize me down</textarea>
  </div>
</div>
<br>

新增:

<div style="display:inline-block">
  <div style="max-height:150px;overflow-y:auto; border:1px solid gray">
    <div style="display:inline-block">
      <table border=1><tr>
          <td>I do not</td><td>want this to</td>
          <td>add breaks in the text.</td>
      </tr></table>
      <textarea rows=3 cols=15>Resize me down</textarea>
    </div>
    <div style="display:inline-block; width:19px; height:1px"></div>
  </div>
</div>
<br>

Shounak Das 4 年前

我知道您只想通过CSS实现这一点,但我正在提供jQuery解决方案,以防有人会找到帮助。

var checkScrollBars = function(){
    var b = $('body');
    var normalw = 0;
    var scrollw = 0;
    if(b.prop('scrollHeight')>b.height()){
        normalw = window.innerWidth;
        scrollw = normalw - b.width();
        $('#container').css({marginRight:'-'+scrollw+'px'});
    }
}

如果所有内容的高度都大于容器高度,则上面的代码段将添加一个边距。

如果不需要,我们也可以删除水平滚动条:

body{
    overflow-x:hidden;
}

Gust van de Wal user41410 4 年前

是在那里。现在,我们不想强迫滚动条 看得见的 为网站的所有内容创建一个始终显示滚动条的容器,并将其隐藏。这是惊人的简单!
我创造了 a Fiddle . 这里是一个片段:

/* The trick: */

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  width: 100vw;
}

body > * {
  overflow-y: scroll;
  margin-right: -100px;
  padding-right: 100px;
}

/* Other styling: */

body {
  font-family: sans-serif;
  user-select: none;
  --color: rgb(255 191 191);
}

header {
  position: sticky;
  top: 0;
  z-index: 1;
  --color: rgb(191 191 255);
}

body > * > div {
  background-color: var(--color);
  border: 3px solid;
  margin: 10px;
  padding: 20px;
  font-size: 20px;
  font-weight: bold;
}

label::before {
  position: relative;
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: 0 10px;
  top: .2em;
  border: 1px solid;
  border-radius: .1em;
}

input:checked + label::before {
  background-color: var(--color);
  box-shadow: inset 0 0 0 1px #FFF;
}

input {
  display: none;
}

input:not(:checked) ~ div {
  display: none;
}

input ~ div {
  height: 200vh;
}

<header>
  <div>I am sticky!</div>
</header>
<main>
  <div>Hello world!</div>
  <input id="foo-2" type="checkbox" />
  <label for="foo-2">Click me</label>
  <div>Let's scroll</div>
</main>

诀窍是给包含元素一个负的边距和右边的正填充。用于这两个属性的偏移量可以超过滚动条宽度,因此 100px 我无法想象任何浏览器或网站的滚动条比 20px ,更别说了 .

顺便说一句:我将这些风格应用于 body ,而不是一个 #container 元素,是因为 position: sticky

html 包含 #容器 sticky element

html格式 包含 sticky container ->确实有效

Jasdeep Singh 4 年前

You can do it with using this css on the content element: `calc(100% - 15px)`.
// calc(100% - the width we want to give on right hand side of content)

请阅读下面的内容来检查它是如何工作的。

overflow:scroll.

但是,如果您不想在不需要滚动条时显示滚动条,则应使用相对于的宽度 viewport (大众)而不是使用100%。当滚动条进入视窗宽度时,如果我们知道滚动条的宽度,那么我们可以使用下面的公式来完成我们的任务。这里我将内容宽度设置为viewport width减去滚动条的宽度(比如说15px)。

您需要提供宽度: calc(100% - 15px) . 您可以以%em等为单位提供宽度。

/* width */
::-webkit-scrollbar {
  width: 10px;
} 
#content {
  width: calc(100% - 10px).
}

注意:Firefox或Edge 79之前的版本不支持自定义滚动条。而且这个CSS只在webkit浏览器中工作,所以在IE中可能不起作用。

.scroll {
    height: 100px;
    overflow: auto;
    border: 1px solid black;
    width: 75%;
}

.zui-table {
      width: calc(100% - 10px);
    border: solid 1px #DDEEEE;
    border-collapse: collapse;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
    background-color: #DDEFEF;
    border: solid 1px #DDEEEE;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}

<div class="scroll">
  <table class="zui-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Height</th>
        <th>Born</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>DeMarcus Cousins</td>
        <td>C</td>
        <td>6'11"</td>
        <td>08-13-1990</td>
        <td>$4,917,000</td>
      </tr>
      <tr>
        <td>Isaiah Thomas</td>
        <td>PG</td>
        <td>5'9"</td>
        <td>02-07-1989</td>
        <td>$473,604</td>
      </tr>
      <tr>
        <td>Ben McLemore</td>
        <td>SG</td>
        <td>6'5"</td>
        <td>02-11-1993</td>
        <td>$2,895,960</td>
      </tr>
      <tr>
        <td>Marcus Thornton</td>
        <td>SG</td>
        <td>6'4"</td>
        <td>05-05-1987</td>
        <td>$7,000,000</td>
      </tr>
      <tr>
        <td>Jason Thompson</td>
        <td>PF</td>
        <td>6'11"</td>
        <td>06-21-1986</td>
        <td>$3,001,000</td>
      </tr>
    </tbody>
  </table>
</div>

feelinferrety wallop 10 年前

问题是,一旦将鼠标悬停在容器上,滚动条出现,内容宽度就会缩小。因此,即使使用宽度等于容器减去滚动条的嵌套容器,嵌套容器的宽度也会缩小。

一种解决方案是通过悬停时滚动条的宽度来增加内容的大小。这里有一个解决方案,不需要使用任何嵌套的外部容器( categoryCont 是滚动容器,每个 menuBlock 是要滚动的项目之一):

<div id="categoryCont" style="position:relative;width:200px; overflow:hidden;">
    <div class="menuBlock" style="width:200px">a</div>
    <div class="menuBlock" style="width:200px">b</div>
    <div class="menuBlock" style="width:200px">c</div>
    ...
</div>

<style type="text/css">
    #categoryCont:hover{
        overflow-y: auto;
    }
    #categoryCont:hover .menuBlock{
    /* Increase size of menu block when scrollbar appears */
        width: 218px;    /* Adjust for width of scroll bar. */
    }
</style>

通过使用px

将内容设为绝对值,将左缩进设为绝对值

<div class="menuBlock" style="width:200px">
    a
</div>

更改为

<div class="menuBlock" style="width:200px">
    <span>a</span>
</div>

<style>
    .menuBlock span{        /* Good cross-browser solution but cannot use % */
        position:absolute;
        left:70px;
    }
</style>

使用%

您需要CSS和jQuery(第一步是相同的)

<一
</div>

<div class="menuBlock" style="width:200px">
    <span>a</span>
</div>

<style>
    .menuBlock span{        /* Good cross-browser solution but cannot use % */
        position:absolute;  /* This one does not use 'left' */
    }
</style>

<script>
    // Indent left 30% because container width remains same but content width changes
    var leftIndent = (30/100) * $("#categoryCont").width();
    $(".menuBlock span").css({"left":leftIndent});
</script>

-1

ZzZzZzZz 4 年前

我不太清楚你的要求(对不起,我很少CSS的经验),但我认为你想设置一个HTML的宽度 div 元素到 100% 使用CSS时,不会出现滚动条。这里有一个解决方案。

#element {
  background-color: blue;
  height: 40px;
  position: relative;
  margin-left: 0px;
  margin-right: 0px;
  padding-left: 0px;
  padding-right: 0px;
  width: 100%;
}

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="element"></div>
  </body>
</html>

出现一个滚动条,因为 position margin 和 padding 的属性元素。如果你设置 margin-right , margin-left , padding-right ,和 padding-left 0 ,然后设置 位置 属性到 relative

-2

Suraj Rao Raas Masood 4 年前

* {
    overflow: hidden;
}

隐藏滚动条的简单方法