相关疑难解决方法(0)

我有一个有两列的布局 - 左边div和右边div.

右边div有灰色background-color,我需要它根据用户浏览器窗口的高度垂直展开.现在是background-color最后一段内容的结尾div.

我试过了height:100%,min-height:100%;等等

我试图<div>在CSS中设置一个特定的百分比高度,但它只是保持与其中的内容相同的大小.<!DOCTYTPE html>但是,当我删除HTML 5 时,它可以工作,根据<div>需要占用整个页面.我希望页面验证,所以我该怎么办？

我有这个CSS <div>,其ID为page:

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}

我有一个只存在表单的页面,我希望将表单放在屏幕的中心.

<div class="container">
  <div class="row justify-content-center align-items-center">
    <form>
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>  
</div>

该justify-content-center对齐表格水平,但我无法弄清楚如何垂直对齐.我试过使用align-items-center和align-self-center,但它不起作用.

我错过了什么？

DEMO

我有两个高度为90%的div,但显示效果不同.

我试图在它们周围放置一个外部div,但这没有帮助.此外,它在Firefox,Chrome,Opera和Safari上也是如此.

有人能解释我为什么会遇到这个问题吗？

以下是我的代码:

<div style="height: 90%">
    <div ng-controller="TabsDataCtrl" style="width: 20%; float: left;">
        <tabset>
            <tab id="tab1" heading="{{tabs[0].title}}" ng-click="getContent(0)" active="tabs[0].active"
               disabled="tabs[0].disabled">
            </tab>


            <tab id="tab2" heading="{{tabs[2].title}}" ng-click="getContent(2)" active="tabs[2].active"
                 disabled="tabs[2].disabled">
            </tab>
        </tabset>
    </div>

    <div id="leaflet_map" ng-controller="iPortMapJobController">
        <leaflet center="center" markers="markers" layers="layers" width="78%"></leaflet>
    </div>
</div>

我有一个div,height: 100%;但它不起作用.当我宣布一个固定的高度(例如height: 600px;)它正在工作,但我想要一个响应式设计.

HTML:

<blink><div class="row-fluid split-pane fixed-left" style="position: relative; height: 78%;">
    <div class="split-pane-component" style="position: relative; width: 50em;">
        <div style="">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#html" data-toggle="tab">Html</a></li>
                <li><a href="#helpers" data-toggle="tab">Helpers</a></li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane active" id="html" style="height: 100%;">
                    <textarea id="htmlArea" style="height: 100%;">{{:html}}</textarea>
                </div>
                <div class="tab-pane" id="helpers" style="height: 100%;">
                    <textarea id="helpersArea">{{:helpers}}</textarea>
                </div>
            </div>
        </div>
    </div>
    <div class="split-pane-divider" id="my-divider" style="left: 50em; width: 5px;"></div>
    <div class="split-pane-component" style="left: 50em; margin-left: 5px;">
        <div style="">
            <ul class="nav nav-tabs">
                <li>
                    <a href="#" …

我在Bootstrap 4:Bootply链接中进行了以下设置

其中带有"Supplier"文本的元素应该是垂直居中的,我有不同的行,代码相同,我希望它们居中.没有解决方案似乎对我有用.

有人可以在这里找到我做错了什么,并指出我正确的方向？

谢谢.

如果我不清楚,我不知道如何问这个如此原谅我,请让我澄清一下.我想将页面居中,并在居中内容的右侧有一个"侧栏",而不是视口的右侧.这很简单,除了我希望元素和视口一样高.但是,如果身体标签较高,我希望它与身体标签一样高.我需要这个,因为侧边栏的背景必须沿y轴重复以覆盖整个视口.我可能没有解释任何事情,所以也许这个jsFiddle将清除任何错过的细节.

http://jsfiddle.net/dHerb/

我可以将.center样式设置为静态的位置值,但是然后绝对定位被抛弃.我可以将侧边栏浮动到右侧,但高度不会填满页面.我可以使用JavaScript,但不应依赖JavaScript进行布局,因为依赖它的元素是页面内容的四分之一.

任何指针都将非常感激.

编辑:更改正文和html标记高度为100%有帮助,但它仍然没有像我描述的那样表现.如果视口中有内容并且您滚动到该内容,则不会重复背景.

那时我的html给出了这个输出:

但我想这样:

所以你怎么看我试图添加一个span数字有空间的地方.我给了这个班级:

.spanContainer{
   height:100%; 
   padding-right:15px 
}

但不知何故,这height:100%给了我不想要的效果!我该怎么办？谢谢 http://jsfiddle.net/52VtD/3398/

<ul class="list-group">
    <li class="list-group-item">
        <span class="spanContainer">
            <a class="text-success">02401</a>
        </span>
        H2-Atemtest
    </li>
    <li class="list-group-item">
        <span class="spanContainer">
            <a class="text-success">03241</a>
        </span>
        Computergestützte Auswertung eines kontinuierlich aufgezeichneten Langzeit-EKG von mindestens 18 Stunden Dauer
    </li>
</ul>

我有以下布局:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  <title>Bootstrap</title>
</head>
<body>

<div class="container bg-danger h-100">
  <div class="bg-warning border p-1">Exotic</div>
  <div class="bg-warning border p-1">Grooming</div>
  <div class="bg-warning border p-1">Health</div>
  <div class="bg-warning border p-1">Nutrition</div>
  <div class="bg-warning border p-1">Pests</div>
  <div class="bg-warning border p-1">Vaccinations</div>
</div><!-- container -->

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>

问题是,为什么div容器不是100%的高度？

谢谢

我一直在努力寻找我的答案。无论如何要在相对定位中将高度设置为 100%？

css

div{
    width:100%;
    height:100%;
    min-height:100%;
    max-height:100%;
    position:relative;
    background:red;
}

小提琴

我正在努力在我的 vuejs 应用程序中制作粘性页脚。

vuejs 和其他类似的框架，要求模板中存在一个根元素。

但这使得使用 Flex 添加粘性页脚变得困难。

没有根元素：

<div class="content">
  <h1>Sticky Footer with Flexbox</h1>
  <p>
    <button id="add">Add Content</button>
  </p>
</div>

<footer class="footer">
  Footer
</footer>

一切都适用，但对于根元素，则不行。

<div>
  <div class="content">
    <h1>Sticky Footer with Flexbox</h1>
    <p>
      <button id="add">Add Content</button>
    </p>
  </div>

  <footer class="footer">
    Footer
  </footer>
</div>

由于删除根元素不是一个选项，请问如何更新 css 以使用根元素？

提琴手