css - 除非页面高度很短，否则无法点击某些链接-6ren

css - 除非页面高度很短，否则无法点击某些链接

转载作者：行者123 更新时间：2023-11-28 14:41:43

我正在学习 bootstrap 4。我有一个带有左侧导航栏的页面。这些链接指向同一页面中的段落。左侧导航始终保持可见。

问题是:

当浏览器窗口的HEIGHT处于全屏、桌面模式时，底部的两个链接无法从左侧导航栏单击(元素链接:元素 3-2 和元素 4-2)-也就是说，不能将鼠标放在链接上以单击它.所有其他链接都可以正常工作。

手动将浏览器窗口的高度变短后，这个问题就消失了，我可以点击所有链接。

全屏桌面模式下出现问题的原因是什么？

我猜是这个类导致了这个问题 - 但我不确定。

 .bd-example {
        position: -webkit-sticky; /* is it this? */
        position: sticky;
        top: .5rem; height: calc(100vh - .5rem);
        overflow-y: auto;
        padding-top: .5rem;
        padding-bottom: .5rem;
        font-size: .875rem;
        display: inline-block;
    }

代码作为文档: page HTML and CSS code file

我将代码放在 jsFiddle 中: https://jsfiddle.net/ekareem/aq9Laaew/250605/但是，需要使结果页面足够高才能观察到问题。

谢谢。

最佳答案

那是因为您要滚动到的元素太短，而最后一个元素可以全部显示在一个屏幕上。

要解决此问题，您需要允许页面实际滚动到它们(将滚动到的元素放在页面顶部)。

在下面的示例中，我使用的是“穷人的修复” - padding-bottom:100vh到容器 - 所以你可以看到它正常工作:

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.bd-example {
    position: -webkit-sticky;
    position: sticky;
    top: .5rem; height: calc(100vh - .5rem);
    overflow-y: auto;
	padding-top: .5rem;
    padding-bottom: .5rem;
    font-size: .875rem;
	display: inline-block; /* could cause a slider when short vitewport */
}
[data-target="#navbar-example3"] {
  padding-bottom: 100vh;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>  
</div>

<body data-spy="scroll" data-target=".bd-example">

    <div class="container">
        <div class="row">
            <div class="col-4">
    
                <div class="bd-example">

                    <nav id="navbar-example3" class="navbar navbar-dark bg-light">
                            
                        <nav class="nav nav-pills flex-column">
                            <a class="navbar-brand" href="#" style="color:black;">Test</a>

                            <a class="nav-link" href="#item-1">Item 1</a>
                            <ul class="nav nav-pills flex-column">
                                <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
                                <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
                            </ul>

                            <a class="nav-link" href="#item-2">Item2</a>                         

                            <a class="nav-link" href="#item-3">Item3</a>
                            <ul class="nav nav-pills flex-column">
                                <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
                                <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
                            </ul>

                            <a class="nav-link" href="#item-4">Item4</a>
                            <ul class="nav nav-pills flex-column">
                                <a class="nav-link ml-3 my-1" href="#item-4-1">Item 4-1</a>
                                <a class="nav-link ml-3 my-1" href="#item-4-2">Item 4-2</a>
                            </ul>
                        </nav>

                    </nav>
                </div>
            </div>

            <div class="col-8">
                <div data-spy="scroll" data-target="#navbar-example3" data-offset="300">
                    <h4 id="item-1">Item 1</h4>
                        <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id
                            magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore.
                            Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non
                            excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim
                            reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam
                            non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
                        </p>
                            <h5 id="item-1-1">Item 1-1</h5>
                                <p>Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat
                                    elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum
                                    excepteur irure consequat id quis ea. Sit proident ullamco aute magna pariatur nostrud labore.
                                    Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur
                                    consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate
                                    excepteur minim exercitation minim minim commodo adipisicing exercitation officia nisi adipisicing. Anim
                                    id duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.
                                </p>
                            <h5 id="item-1-2">Item 2-2</h5>
                                <p>Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure
                                    laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna
                                    occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore
                                    anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla
                                    in non consequat eiusmod velit incididunt.
                                </p>

                    <h4 id="item-2">Item 2</h4>
                    <p>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum
                        consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur
                        mollit
                        voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
                        Lorem
                        aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor
                        laborum
                        mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum
                        fugiat ex
                        est consectetur ipsum commodo tempor sunt in proident.
                    </p>

                    <h4 id="item-3">Item 3</h4>
                        <p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua
                            ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit.
                            Deserunt
                            tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco
                            excepteur.
                        </p>
                        <h5 id="item-3-1">Item 3-1</h5>
                            <p>Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore
                                anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi
                                enim labore reprehenderit labore nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor
                                eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex
                                exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip
                                laborum consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.
                            </p>
                        <h5 id="item-3-2">Item 3-2</h5>
                            <p>Labore sit culpa commodo elit adipisicing sit aliquip elit proident voluptate minim mollit
                                nostrud aute reprehenderit do. Mollit excepteur eu Lorem ipsum anim commodo sint labore Lorem in
                                exercitation velit incididunt. Occaecat consectetur nisi in occaecat proident minim enim sunt
                                reprehenderit exercitation cupidatat et do officia. Aliquip consequat ad labore labore mollit
                                ut amet. Sit pariatur tempor proident in veniam culpa aliqua excepteur elit magna fugiat eiusmod amet officia.
                            </p>

                    <h4 id="item-4">Item 4</h4>
                    <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id
                        magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore.
                        Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non
                        excepteur nulla  magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim
                        reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam
                        non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
                    </p>
                    <h5 id="item-4-1">Item 4-1</h5>
                    <p>Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat
                        elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum
                        excepteur irure consequat id quis ea. Sit proident ullamco aute magna pariatur nostrud labore.
                        Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur
                        consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate
                        excepteur minim exercitation minim minim commodo adipisicing exercitation officia nisi adipisicing. Anim
                        ix duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.
                    </p>
                    <h5 id="item-4-2">Item 4-2</h5>
                    <p>Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure
                        laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna
                        occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore
                        anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non
                        consequat eiusmod velit incididunt.
                    </p>
                </div>
            </div>
        </div>
    </div>

其他更详细的选项包括:

在您的内容之后添加最小高度为 100vh 的任何元素减去你最后一个元素的高度(一个漂亮的，高的，页脚，也许？) - 如果你想不出别的，简单地输入 <div>带有 ( min-height: 100vh; background: url('link-to-nice-picture' no-repeat 50% 50% /cover)，以及位于底部中心的“谢谢”精美打印信息。示例:

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.bd-example {
  position: -webkit-sticky;
  position: sticky;
  top: .5rem;
  height: calc(100vh - .5rem);
  overflow-y: auto;
  padding-top: .5rem;
  padding-bottom: .5rem;
  font-size: .875rem;
  display: inline-block;
  /* could cause a slider when short vitewport */
}

.bottom-message {
  background: url(https://static.boredpanda.com/blog/wp-content/uploads/2014/08/cat-looking-at-you-black-and-white-photography-1.jpg) no-repeat bottom center /cover;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.bottom-message em{
  font-family: initial;
  font-size: 1.5rem;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<body data-spy="scroll" data-target=".bd-example">

  <div class="container">
    <div class="row">
      <div class="col">
        1 of 2
      </div>
      <div class="col">
        2 of 2
      </div>
    </div>
    <div class="row">
      <div class="col">
        1 of 3
      </div>
      <div class="col">
        2 of 3
      </div>
      <div class="col">
        3 of 3
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-4">

        <div class="bd-example">

          <nav id="navbar-example3" class="navbar navbar-dark bg-light">

            <nav class="nav nav-pills flex-column">
              <a class="navbar-brand" href="#" style="color:black;">Test</a>

              <a class="nav-link" href="#item-1">Item 1</a>
              <ul class="nav nav-pills flex-column">
                <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
                <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
              </ul>

              <a class="nav-link" href="#item-2">Item2</a>

              <a class="nav-link" href="#item-3">Item3</a>
              <ul class="nav nav-pills flex-column">
                <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
                <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
              </ul>

              <a class="nav-link" href="#item-4">Item4</a>
              <ul class="nav nav-pills flex-column">
                <a class="nav-link ml-3 my-1" href="#item-4-1">Item 4-1</a>
                <a class="nav-link ml-3 my-1" href="#item-4-2">Item 4-2</a>
              </ul>
            </nav>

          </nav>
        </div>
      </div>

      <div class="col-8">
        <div data-spy="scroll" data-target="#navbar-example3" data-offset="300">
          <h4 id="item-1">Item 1</h4>
          <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore
            proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat
            id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
          </p>
          <h5 id="item-1-1">Item 1-1</h5>
          <p>Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure consequat id quis ea. Sit proident ullamco
            aute magna pariatur nostrud labore. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate excepteur minim exercitation
            minim minim commodo adipisicing exercitation officia nisi adipisicing. Anim id duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.
          </p>
          <h5 id="item-1-2">Item 2-2</h5>
          <p>Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur
            ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.
          </p>

          <h4 id="item-2">Item 2</h4>
          <p>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem.
            Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat
            ex est consectetur ipsum commodo tempor sunt in proident.
          </p>

          <h4 id="item-3">Item 3</h4>
          <p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat
            mollit culpa irure ullamco est ex ullamco excepteur.
          </p>
          <h5 id="item-3-1">Item 3-1</h5>
          <p>Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore reprehenderit labore nostrud ut ut.
            Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip laborum
            consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.
          </p>
          <h5 id="item-3-2">Item 3-2</h5>
          <p>Labore sit culpa commodo elit adipisicing sit aliquip elit proident voluptate minim mollit nostrud aute reprehenderit do. Mollit excepteur eu Lorem ipsum anim commodo sint labore Lorem in exercitation velit incididunt. Occaecat consectetur nisi
            in occaecat proident minim enim sunt reprehenderit exercitation cupidatat et do officia. Aliquip consequat ad labore labore mollit ut amet. Sit pariatur tempor proident in veniam culpa aliqua excepteur elit magna fugiat eiusmod amet officia.
          </p>

          <h4 id="item-4">Item 4</h4>
          <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore
            proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat
            id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
          </p>
          <h5 id="item-4-1">Item 4-1</h5>
          <p>Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure consequat id quis ea. Sit proident ullamco
            aute magna pariatur nostrud labore. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate excepteur minim exercitation
            minim minim commodo adipisicing exercitation officia nisi adipisicing. Anim ix duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.
          </p>
          <h5 id="item-4-2">Item 4-2</h5>
          <p>Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur
            ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="bottom-message"><em>Say cheese...</em></div>
</body>

将 scrollspy 元素的数量减少到有用的数量(记住 scrollspy 的功能是允许用户快速滚动大量内容 - 所以也许只将它添加到部分，而不是子部分!？)。

https://jsfiddle.net/websiter/uodnhqyp/

使每个 scrollspy 部分的高度最小 100vh ，用图形丰富您的应用程序，图形是引人注目的现代设计的支柱。

关于css - 除非页面高度很短，否则无法点击某些链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52834326/

文章推荐： html - 使用 DIV 进行连续布局

文章推荐： html - 是否有 html/css 技术的存储库？

文章推荐： css - 关于布局提交按钮的问题

文章推荐： css - 无法让按钮在 IE 7 中显示

javascript - 剑道图表 105% 高度，而不是 100% 高度？
我有下面的图表，它填充了显示器的宽度和高度。高度始终只比屏幕大一点，因此会出现滚动条以显示底部 20 像素左右。有没有办法让 Kendo UI 显示 100%，而不是 105% 的高度？在线示例:
html - 创建当前视口(viewport)高度 div 的 100% 高度
这个问题在这里已经有了答案: Why doesn't height: 100% work to expand divs to the screen height? (12 个答案) 关闭 9 年前
CSS:iframe 不显示 100% 高度...更像是 100px 高度
此页面 ( http://purcraft.com/madeinla/) 有问题，我正在尝试使用 iframe 元素显示此页面的内容:( http://purcraft.com/madeinla/ho
css - 将子 div 的高度设置为 parent 高度 - sibling 高度
我在一个父 div 中有 2 个子 div。 Child1 是标题，Child2 是正文。我希望将 Child 2 的高度设置为 Parent - Child1 的高度。 Child2 有内容，所以它
image - 根据父宽度/高度 CSS HTML 自动调整 img 宽度/高度
我正在尝试用图像填充窗口。我正在使用 CSS 来尝试解决这个问题，但我想知道是否有一种方法可以最大化图像的宽度/高度，直到所有空白区域都被填满，但又不会破坏质量。 .rel-img-co
css - 粘性页脚和 100% 高度 - 强制 div 获得 100% 高度
这个问题在这里已经有了答案: How to make a div 100% height of the browser window (41 个回答) 关闭 8 年前。
css - 将 Sprite 图标添加到标签。有没有办法只为 Sprite 设置宽度/高度，并为标签设置第二个宽度/高度？
这可能是一个新手问题，但是是否可以将 Sprite 图标添加到带有文本的标签中？例如: labeltext .icon { width: 30px height: 30px;
jquery - 使用 jquery 设置 div 高度(拉伸(stretch) div 高度)
我有 3 个 div，分别是 header、content 和 footer。页眉和页脚具有固定的高度，并且它们被设计为 float 在顶部和底部。我想要使用 jquery 自动计算中间的 con
javascript - 计算内部 div 的宽度/高度(以毫米为单位)(相对于已知宽度/高度(以毫米为单位)的外部 div。)
我有一个外部 div，其指定的宽度/高度(以毫米为单位)。 (mm只是赋值，不用于渲染)。里面有另一个 div，其实际宽度/高度(以 px 为单位)。两个 div 可以具有不同的比例。我想要做的
css - 如果我使用 HTML5 文档类型，为什么不能使我的 div 100% 高度？我如何获得它的 100% 高度
我正在为一个非常简单的画廊 webapp 进行布局排序，但是当我使用 HTML5 文档类型声明时，我的一些 div(100%)的高度会立即缩小，我不能似乎使用 CSS 将它们丰满起来。我的 HTML
css - 如果我使用 HTML5 文档类型，为什么不能使我的 div 100% 高度？我如何获得它的 100% 高度
我正在为一个非常简单的画廊 webapp 进行布局排序，但是当我使用 HTML5 文档类型声明时，我的一些 div(100%)的高度会立即缩小，我不能似乎使用 CSS 将它们丰满起来。我的 HTML
iphone - 如何更改 iphone 中 UISearchBar 的 UiSearchbar 高度、宽度、颜色和 Uitextfield 高度？
我想更改 UISearchBar。文本字段的高度和宽度。我的问题是如何更改 iphone 中 UISearchBar 中的 UiSearchbar 高度、宽度、颜色和 Uitextfield 高度？
html - 如果 parent 的 div 也是 100% 宽度/高度，如何给 child div 宽度/高度 100%
我想要两个宽度和高度均为 100% 的 div。我知道子 div 不会工作，因为父 div 没有特定的高度，但有没有办法解决这个问题？ HTML: CSS: body
jQuery if 高度
我有几个带有“priceText”类的 div，我试图实现如果 div.priceText 高度小于 100px，则隐藏 this div 中的图像。我无法让它工作。我已成功隐藏所有 .priceT
javascript获取表格中所有图像的自然宽度/高度
我正在尝试从 Image 列中列出的图像中获取实际图像尺寸，并将其显示在 Image Size 列中。我遇到的问题是，我只能获取第一张图片的大小，该图片会添加到 Image Size 列的每个单元格
jQuery获取容器中加载的图像宽度/高度
我正在使用一个插件，它要求我在加载图像后获取图像的宽度和高度，而不管图像的尺寸是如何确定的。
parsing - 如何在pdf中获得准确的字体大小(高度)
我有一个示例 pdf(已附)，它包括一个文本对象和一个高度几乎相同的矩形对象。然后我使用 itextrup 检查了 pdf 的内容，如下所示: 1 1 1 RG 1 1 1 rg 0.12 0 0 0
运行时的 WPF 高度
我是 WPF 新手。我试图解决的一个问题是如何在运行时获得正确的高度。在我的应用程序中，我将用户控件动态添加到代码隐藏中的 Stackpanel。 Usercontrol 包含一些 Texblock
WPF 高度/宽度
在自定义 WPF 控件中，我想将控件的宽度设置为高度的函数。例如:Width = Height/3 * x; 实现此目的的最佳方法是什么，以便控件正确且流畅地调整大小(和初始大小)？最佳答案您可以
WPF RibbonComboBox 高度
好吧，我本以为这是一个简单的问题，但显然它让我感到困惑。当我尝试设置 RibbonComboBox 的高度时，它不会移动它的实际大小，而是移动它周围的框。这是我的 XAML:

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 除非页面高度很短，否则无法点击某些链接