css - 带 Bootstrap 的仪表板，为什么左手菜单不起作用最小高度 : 100%, 但它适用于 px？-6ren

css - 带 Bootstrap 的仪表板，为什么左手菜单不起作用最小高度 : 100%, 但它适用于 px？

转载作者：太空宇宙更新时间：2023-11-04 09:11:47

28

4

我想使用 Bootstrap 3.3.7 从头开始创建一个仪表板以供学习之用。我对左侧菜单有疑问。我希望它占据它获得的整个区域(col-lg-1 列和 100% 高度)。我的问题是 min-height:100% 和 height: auto 不起作用，但 min-height:xxx px 效果很好.

我在这里看到其他帖子说 min-height:100% 应该有效。

我做错了什么？

这是 plunker .

<!DOCTYPE html>
<html>

<head>
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
</head>

<body>
    <main style="margin-top: 0px; padding-top: 0px; padding-bottom: 0px;">
        <div class="container-fluid padding-left-zero padding-right-zero">
            <div class="container-fluid padding-left-zero padding-right-zero">
                <div style="margin-bottom: -20px;">
                    <nav class="navbar navbar-default navbar-inverse navbar-fixed-top">

                        <div class=" container-fluid row">
                            <div class="pull-left">
                                <a class="navbar-brand" href="/">Dashboard</a>
                            </div>
                            <div style="height: 50px; padding: 15px;" class="pull-right">
                                <select>
                                    <option value="module">value</option>
                                </select>
                            </div>
                        </div>
                    </nav>
                </div>
            </div>
            <div class="row container-fluid padding-left-zero padding-right-zero">
                <!-- code of lenfthandmenu -->
                <!-- <div class="col-lg-1 pull-left navbar-inverse fill">
                    <div ui-view="leftHandMenu"></div>
                </div>-->
                <div class="col-lg-1 pull-left navbar-inverse fill2">
                    <div ui-view="leftHandMenu"></div>
                </div>
                <div class="col-lg-11 pull-right">
                    <div ui-view="mainContent"></div>
                </div>
            </div>
            <div>
                <div class="navbar navbar-inverse navbar-fixed-bottom">Navbar bottom</div>
            </div>
        </div>
    </main>
</body>

</html>

CSS:

/* Styles go here */

body {
    padding-top: 50px;
}
.padding-left-zero {
    padding-left: 0px;
}

.padding-right-zero {
    padding-right: 0px;
}

li {
    list-style: none;
}

.silver-text {
    color: silver;
}

.min-width-100-percent {
    min-width: 100%;
}

.fill {
    min-height: 100%;
    height: auto;
}

.fill2 {
    min-height: 300px;
    height: auto;
}

最佳答案

将绝对位置属性和高度应用为 100%，如下所示。

.fill2 {
   position:absolute;
   height: 100%;
}

DEMO

关于css - 带 Bootstrap 的仪表板，为什么左手菜单不起作用最小高度 : 100%, 但它适用于 px？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42076811/

28

4

0

文章推荐： Java Stream sortBy 和 filter()

html - 为什么我必须定义 "transform: xxx( px px)"毕竟 "-o-/-webkit-/-moz-transform: xxx(px px)"？
我正在上 codeschool，他们告诉我: SORRY, TRY AGAIN transform must be defined last, after the browser prefix sty
css - SASS 错误 : Incompatible units: 'px' and 'px*px'
我正在使用 SCSS 更改 bootstrap 4 的样式以创建我自己的样式，但是当我编译 SCSS 时出现此错误: { "status": 1, "file": "H:/!WEBSITE/m
Photoshop px 与 OS px
在将作为 photoshop 文件给出的网页设计转换为 html+css 时，我对字体大小感到困惑。如下图所示，photoshop 中的 30 px 不等于其他 Windows 程序(Mac 或其他程
html - 负 px 或大数 px - 哪个更好
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 6 年前。 Improve
html - 如何将未排序列表放在预定义 (a px *b px) 框的底部？
在我当前的代码中，ul 一直放在页面底部，超过了我的预定义框。我尝试使用 position:fixed 和 bottom:0 .box { width: 900px; height:
html - Photoshop px 大小与 CSS px 大小不同
我在 photoshop 中有一个模型，其字体为 60px。我将浏览器中的字体设置为相同的 60px 大小，但浏览器中的字体较小。知道这是为什么吗？最佳答案您在 Photoshop 中为您的文本启
html - 在(仅)css 中查找浏览器宽度 px 和高度 px
我想知道是否有可能仅使用 CSS 获取页面的浏览器/视口(viewport)像素尺寸并将其显示在页面上(最好使用“内容”样式)。我正在为我的一个元素(完全用 CSS 构建)这样做。我知道使用 JS 很
android - 公式 px 到 dp，dp 到 px android
我正在尝试将可变数量的像素计算为与密度无关的像素，反之亦然。这个公式 (px to dp): dp = (int)(px/(displayMetrics.densityDpi/160)); 不适用于
html - 从 % 中减去 px 的 CSS calc() 将 px 值解释为 %
我在一个带有 1px 边框的容器中有两个 div。我希望每个 div 按宽度正好占据容器的一半，所以我尝试使用 CSS3 的 calc函数从总宽度 (50%) 中减去预定的像素值(2px，div 的每
css - 如何将 px 转换为 %，就像我们将 px 转换为 em 以获得 Font-Size？
我正在使用 em 但在嵌套元素中遇到问题所以我决定使用 % 作为 yui建议。 To change the size of a font, always use percentages as the
javascript - 在 CSS 中，将容器大小设置为 X px，如果子项小于 X px，则将容器大小减小为子项大小
我有一个元素容器。我想为容纳元素的容器设置最大高度，但如果元素没有填满整个尺寸，则让容器降低其高度。是否可以通过 CSS 实现？最佳答案也许使用height: auto。请显示您的 CSS 和 H
javascript - 更改背景位置 : "x"px "x"px using jQuery/Javascript for a class 中的 "y"
我刚刚开始使用 sprites 来减少 HTTP 请求，我在将处理悬停动画的旧脚本转换到新系统时遇到了一些问题。我真的不想为每个按钮设置一个单独的功能，因为这很痛苦，尤其是按钮的数量，即使复制和粘贴也
android - 将 dp 值转换为 WebView 内部可用的 px 值(dp 到 CSS px)
我正在从头开始创建一个 HTML 页面，并在其中动态放置值，然后将其显示在 WebView 中。我正在尝试在 WebView(作为 HTML)中复制 ActionBar(出现在应用程序的其他 Act
html - 具有混合高度模式(% & px)的嵌套 div 保留 '%' div 填充 'px' div 未使用的空间
我希望“蓝色”容器始终为 70 像素高，而之前的“绿色”div 在使用 javascript 调整 div 大小时始终最大化可用高度。我已经尝试了一段时间，但没有找到合适的解决方案。我们将不胜感激。
html - 如何将 html 正文标签的 16 px 设为 62.5%，以便 px 到 em 的转换变得更容易？
我在 Quora 上阅读了以下内容: By setting the font-size of the (which by default its 16px) to 62.5%, setting em
Android DP 到 PX 的转换，在 mdpi 上 160 dp 总是 160 px 吗？
我在关于 http://developer.android.com/guide/practices/screens_support.html 的一些不幸的歧义中迷失了方向，而且我找不到澄清问题的 st
css - px 之间有一个空格有什么区别？
有什么区别: border-right: 1px dotted #CCCCCC; 和: border-right: 1 px dotted #CCCCCC; 有没有？第二个不正确吗？你需要在 px
jquery - 添加百分比值而不是 px
我想创建(某种)全 Angular slider ，其中我有一个带有多个子部分的柔性包装器。每个部分100vw排成一排。现在我想每次单击按钮时都将 Flex-wrapper 的 margin-left
Javascript 在将其分配给变量时删除位置值 'px'
在这样的代码中: var a = e.clientX; var b = document.getElementById('someElement').style.left; var z = a - b
html - 是什么导致提交按钮向下移动了一些 px？
我有一个非常简单的表单，其中包含一个和一个 . 这是 HTML: body { font-family: sans-serif; } input { border: none; out

首页

博学

6Ren·AI

商城

css - 带 Bootstrap 的仪表板，为什么左手菜单不起作用最小高度 : 100%, 但它适用于 px？