相关疑难解决方法(0)

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

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

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

我有两个高度为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>

我知道当你在一个元素上使用百分比高度时,百分比就是它的父元素的百分比.假设您希望孩子成为其父母的40%.父级具有最大和最小高度,但没有指定显式高度.例如:

<div id="container">
  <div id="one">
    <div id="two"></div>
  </div>
</div>

CSS

#container{
  height: 500px;
  background: yellow;
}
#one{
  background: red;
  min-height:100px;
  max-height: 50%;
  padding: 10px;
}
#two{
  background: blue;
  height: 40%;
}

Div 2将不会出现.当你将其父级(div一)的css从此max-height:50%更改为此时:height:50%div 2将出现,因为它知道父级的高度是什么,因为它是明确定义的.我的问题是有一种方法可以让div二出现在使用(min/max)-height和不使用时height

这是一个小提琴

我想将视图分为四个部分.顶部的标题,使用整页宽度和固定高度.剩下的页面被分成两个相同高度的块,它们的上面包含两个相同大小的块,彼此相邻.

我尝试的是(没有标题):

#wrap {
  width: 100%;
  height: 100%;
}

#block12 {
  width: 100%;
  max-height: 49%;
}

#block1,
#block2 {
  width: 50%;
  height: 100%;
  float: left;
  overflow-y: scroll;
}

#block3 {
  width: 100%;
  height: 49%;
  overflow: auto;
  /*background: blue;*/
}

.clear {
  clear: both;
}

而CSS:

<div id="wrap">
  <div id="block12">
    <div id="block1"></div>
    <div id="block2"></div>
    <div class="clear"></div>
  </div>
  <div id="block3"></div>
</div>

显然,使用高度的百分比值将无法正常工作.为什么会这样？

我想拥有一个具有最大高度的父元素和一个填充此父元素的子元素.如果孩子的内容超过父母,则应显示滚动条.我试着像这样解决它:

HTML:

<div class="parent">
    <div class="child">
        <div class="some-content">
        abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
        abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
        abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
        abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
        abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
       </div>
    </div>
</div>

CSS:

div.parent {
    max-height: 50px;
    width: 100px;

    border: 1px solid black;
}

div.child {
    height: 100%;

    overflow-y: auto;
}

不幸的是,这不能按预期工作.孩子比父母长大.

请注意,设置overflow-y:auto到PARENT不是一个选项,因为它怀疑其他项目不应滚动.怀疑孩子填补了父母留下的空间.有关更多信息,请参阅实时演示.

现场演示

我喜欢认为自己有一些严重的 CSS 狂妄（我也是一个 PHP hack，并且非常擅长 Javascript），但是今天我正在与一位设计师谈论一个特定的情况，老实说我只是不知道答案它。我希望有人能详细说明这个问题。

设想：

我听到很多人说，“哦，由于响应式设计，我对所有内容都使用百分比”，但是当你去查看他们的 css 时，你会发现他们到处都使用 px 作为边距、填充等。

我的问题是我应该使用像素吗？我想说，我理解这一点的主要痛点是高分辨率屏幕。

例如，我正在创建一个非常简单的“英雄”，其中我将容器的高度设置为 700 像素高，并带有背景图像和一些文本，同时将其宽度设置为 100%。在我的屏幕上创建它，它显示了我屏幕的完整高度（这是意图），但是当我让其他人在更高分辨率的笔记本电脑屏幕上查看它时，图片的高度明显更短，下面有空白它未能填满屏幕的整个高度。

我正在寻找某人来准确解释像素值在更高分辨率的屏幕上受到的影响，以及是否应该始终使用百分比。

例如，如果我在“正常”分辨率屏幕上将容器设置为 300 像素宽，那么该容器在更高分辨率的屏幕上是否会为 150 像素宽，并且看起来会缩小且可怕？

假设我开始使用百分比来表示边距和填充等内容，我很好奇 css 将如何计算它？例如，假设我有一个联系表单，其中有许多输入堆叠在一起，我会执行如下操作：

input {
  margin-bottom: 2.5%;
}

css 从哪里计算 2.5%？它是否说，“将边距底部设为其父级高度的 2.5%？我只是对它的基础是什么感到困惑。

任何意见都将受到高度赞赏。谢谢。