GVKun编程网logo

html – CSS 100％的高度,绝对定位top 0 bottom 0（css设置绝对定位设置距离）

1

以上就是给各位分享html–CSS100％的高度,绝对定位top0bottom0，其中也会对css设置绝对定位设置距离进行解释，同时本文还将给你拓展100vh不会使立柱达到100%的高度、Angula

以上就是给各位分享html – CSS 100％的高度,绝对定位top 0 bottom 0，其中也会对css设置绝对定位设置距离进行解释，同时本文还将给你拓展100vh 不会使立柱达到 100% 的高度、Angular Youtube Player - 适合 100% 的高度 #1 height="100%" 或 height="100vh"#2 动态高度#3 移动 videoHeight、C# 求 1-100 的质数，100-1000 的水仙花数，1-100 所有的平方和平方平方根、CSS 100％高度，填充 / 边距 - CSS 100% height with padding/margin等相关知识，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

html – CSS 100％的高度,绝对定位top 0 bottom 0（css设置绝对定位设置距离）

html – CSS 100％的高度,绝对定位top 0 bottom 0（css设置绝对定位设置距离）

我最近发现一个使用了绝对位置的div的网站,并且顶部,左,右和底部的值都设置为0.这创建了100％的高100％的div.我现在也在使用这个,并且想知道是否有任何理由不呢？

它工作得很好,这是一个简单的解决方案,我使用的另一种方法有一个我无法解决的错误.我正在使用的应用程序应该只占用浏览器窗口,而不需要更大.

解决方法

I am Now using this as well,and was
wondering if there is any reason not
to?

这种技术在现代浏览器中非常有效 – 没有理由不使用它.

(除非你关心一些真正的旧浏览器(IE5 / 6？),哪个don’t support设置顶部和底部或左右在同一个元素上)

Here’s an answer我今天早些时候写了一个类似的技术.

100vh 不会使立柱达到 100% 的高度

100vh 不会使立柱达到 100% 的高度

如何解决100vh 不会使立柱达到 100% 的高度

我有这个代码：

.container {
  display: flex;
  height: 100vh;
}

.menu {
  widh: 150px;
  border: 2px solid red;
}

.body {
  width: 500px;
}
<div>
  <div>
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
  </div>
  <div>
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi explicabo,neque animi non,illum aspernatur,quibusdam repellat quo voluptates quidem molestias aperiam? Nulla dolor optio iste explicabo consequuntur esse incidunt? Facere et,harum eaque,doloribus laudantium facilis debitis eum unde,numquam totam voluptatibus! Ratione dolor quos non numquam esse aut a,minima quod libero maxime rem veritatis molestiae,exercitationem sit. Odio,adipisci,voluptatum quam officia doloribus repellendus
      harum nam porro sequi blanditiis maiores! Esse repellat,quis dicta atque vitae aperiam commodi itaque veniam expedita eum dolorem enim aspernatur corporis quas? Expedita reiciendis odio enim nobis commodi iusto error fuga magni exercitationem ab
      necessitatibus dolorem quidem in voluptas minus quos excepturi aspernatur dignissimos,nostrum quae eius nihil vitae. Eum,eveniet distinctio. Ipsam,itaque. Dolores explicabo neque,voluptatem dolor recusandae minima quasi voluptates ullam sed
      accusamus reiciendis aperiam,omnis sint nemo unde! Neque quisquam ut qui in porro repellendus veniam beatae est! Quaerat aliquam voluptatem recusandae eius quam nesciunt quis molestiae,reiciendis id ad voluptatum aliquid repellat,deleniti incidunt
      delectus quos dolorem ipsam rem aut veniam vel dignissimos harum cum. Molestiae,tempora! Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore provident ad modi delectus blanditiis ex dolores in? Quae sapiente dolorem laboriosam consequatur
      tenetur,consequuntur rerum,blanditiis earum nisi qui odio. Quam,nam. Natus,veniam sint hic repellat debitis pariatur eos quia cum necessitatibus fugiat ratione inventore iusto unde enim quaerat earum facere est laudantium itaque? Tenetur laborum
      voluptatum qui excepturi? Illum quis impedit nulla,amet error fugit doloremque,explicabo voluptatem,iusto corrupti natus delectus nesciunt nisi cum? Repellendus quibusdam praesentium quisquam dicta accusamus pariatur voluptatum,explicabo optio
      a iste tenetur. Iure dolorem illo,voluptates dolorum quas nostrum nesciunt unde laudantium minus pariatur consectetur! Reiciendis,veritatis repudiandae,quasi suscipit distinctio dolorem delectus quibusdam magni explicabo eligendi recusandae est
      adipisci,neque enim? Ea asperiores debitis nostrum. Tempore,deleniti cum alias,quae quia molestias,repudiandae maiores mollitia nostrum quas sapiente quibusdam error id possimus beatae in veniam aliquam. Tenetur praesentium cumque provident
      facilis? Nobis voluptate,exercitationem voluptatem labore atque,aliquid neque maiores pariatur enim ducimus obcaecati placeat culpa excepturi illo necessitatibus? nesciunt aliquam alias delectus adipisci voluptatibus debitis dolores! Aperiam magni
      est illum! Velit laudantium modi tempore distinctio reprehenderit sapiente est possimus officia facilis id sequi nulla facere dolores,vel tempora quas quidem repellendus,cumque neque veniam deserunt laborum quisquam! Blanditiis,eaque doloribus!
      Sint ut magni tenetur quae debitis quos nemo,expedita repellendus voluptas explicabo perferendis corrupti qui reiciendis maiores autem cum est unde dignissimos provident placeat? Eius eaque necessitatibus omnis officia minus. Nostrum,porro odio
      earum nobis nesciunt aliquid beatae quidem ullam veniam deleniti facere laborum itaque tenetur,perspiciatis,sequi omnis SAEpe assumenda. Minus odit molestias provident eaque quia facere recusandae ducimus?
    </div>
  </div>
</div>

问题：即使我将容器的高度设置为 100vh，如果我向下滚动，红色部分也不会到达底部。为什么？以及如何在向下滚动时将 .menu 部分制作到底部？

解决方法

如果您想让它处于整个网站高度，请设置 height: auto; 而不是 height: 100vh。 100vh 不是网站高度的 100%，而是屏幕高度的 100%。

.container {
  display: flex;
  height: auto;
}

.menu {
  widh: 150px;
  border: 2px solid red;
}

.body {
  width: 500px;
}
<div>
  <div>
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
  </div>
  <div>
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi explicabo,neque animi non,illum aspernatur,quibusdam repellat quo voluptates quidem molestias aperiam? Nulla dolor optio iste explicabo consequuntur esse incidunt? Facere et,harum eaque,doloribus laudantium facilis debitis eum unde,numquam totam voluptatibus! Ratione dolor quos non numquam esse aut a,minima quod libero maxime rem veritatis molestiae,exercitationem sit. Odio,adipisci,voluptatum quam officia doloribus repellendus
      harum nam porro sequi blanditiis maiores! Esse repellat,quis dicta atque vitae aperiam commodi itaque veniam expedita eum dolorem enim aspernatur corporis quas? Expedita reiciendis odio enim nobis commodi iusto error fuga magni exercitationem ab
      necessitatibus dolorem quidem in voluptas minus quos excepturi aspernatur dignissimos,nostrum quae eius nihil vitae. Eum,eveniet distinctio. Ipsam,itaque. Dolores explicabo neque,voluptatem dolor recusandae minima quasi voluptates ullam sed
      accusamus reiciendis aperiam,omnis sint nemo unde! Neque quisquam ut qui in porro repellendus veniam beatae est! Quaerat aliquam voluptatem recusandae eius quam nesciunt quis molestiae,reiciendis id ad voluptatum aliquid repellat,deleniti incidunt
      delectus quos dolorem ipsam rem aut veniam vel dignissimos harum cum. Molestiae,tempora! Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore provident ad modi delectus blanditiis ex dolores in? Quae sapiente dolorem laboriosam consequatur
      tenetur,consequuntur rerum,blanditiis earum nisi qui odio. Quam,nam. Natus,veniam sint hic repellat debitis pariatur eos quia cum necessitatibus fugiat ratione inventore iusto unde enim quaerat earum facere est laudantium itaque? Tenetur laborum
      voluptatum qui excepturi? Illum quis impedit nulla,amet error fugit doloremque,explicabo voluptatem,iusto corrupti natus delectus nesciunt nisi cum? Repellendus quibusdam praesentium quisquam dicta accusamus pariatur voluptatum,explicabo optio
      a iste tenetur. Iure dolorem illo,voluptates dolorum quas nostrum nesciunt unde laudantium minus pariatur consectetur! Reiciendis,veritatis repudiandae,quasi suscipit distinctio dolorem delectus quibusdam magni explicabo eligendi recusandae est
      adipisci,neque enim? Ea asperiores debitis nostrum. Tempore,deleniti cum alias,quae quia molestias,repudiandae maiores mollitia nostrum quas sapiente quibusdam error id possimus beatae in veniam aliquam. Tenetur praesentium cumque provident
      facilis? Nobis voluptate,exercitationem voluptatem labore atque,aliquid neque maiores pariatur enim ducimus obcaecati placeat culpa excepturi illo necessitatibus? Nesciunt aliquam alias delectus adipisci voluptatibus debitis dolores! Aperiam magni
      est illum! Velit laudantium modi tempore distinctio reprehenderit sapiente est possimus officia facilis id sequi nulla facere dolores,vel tempora quas quidem repellendus,cumque neque veniam deserunt laborum quisquam! Blanditiis,eaque doloribus!
      Sint ut magni tenetur quae debitis quos nemo,expedita repellendus voluptas explicabo perferendis corrupti qui reiciendis maiores autem cum est unde dignissimos provident placeat? Eius eaque necessitatibus omnis officia minus. Nostrum,porro odio
      earum nobis nesciunt aliquid beatae quidem ullam veniam deleniti facere laborum itaque tenetur,perspiciatis,sequi omnis saepe assumenda. Minus odit molestias provident eaque quia facere recusandae ducimus?
    </div>
  </div>
</div>

,

您只是不需要容器的 height: 100vh; ，删除它，就可以了，请参阅代码段。高度会自动填满整个容器，因为它是一个弹性容器。

.container {
  display: flex;

}

.menu {
  widh: 150px;
  border: 2px solid red;
}

.body {
  width: 500px;
}
<div>
  <div>
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
  </div>
  <div>
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi explicabo,sequi omnis saepe assumenda. Minus odit molestias provident eaque quia facere recusandae ducimus?
    </div>
  </div>
</div>

,

100vh（视口高度）等于窗口的高度（以像素为单位）。这并不意味着它具有 100% 的高度。因此，它的行为完全符合规定。

如果你想在左侧有一个固定位置的菜单，你可以例如将菜单固定在 100vh 的高度。

 position: fixed;
 height: 100vh;

你也可以使用 flexbox 来解决这个问题。见例如Flexbox 100% height Issue

,

您可以看到滚动条，因为元素有自己的 margins 和 paddings，您没有重置，这就是为什么它的高度大于 100vh。

您可以通过为所有元素重置 padding and margin 来解决此问题。

您可以使用 * 来执行此操作，它将定位您网页上的所有元素。

只需将它添加到您的 css 之上，您的滚动条就会消失：

*{

  margin : 0px;
  padding : 0px;

}

至于为什么你的.menu不到底部，很简单，你右边的文字在某个分辨率下变得太大了，正因为如此，它突破了100vh的高度，而你的.menu div仍然保持在 100vh。

希望这有帮助，这是您修复 100vh 的解决方案 :)

*{

  margin : 0px;
  padding : 0px;

}

.container {
  display: flex;
  height: 100vh;
}

.menu {
  widh: 150px;
  border: 2px solid red;
}

.body {
  width: 500px;
}
<div>
  <div>
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
  </div>
  <div>
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi explicabo,sequi omnis saepe assumenda. Minus odit molestias provident eaque quia facere recusandae ducimus?
    </div>
  </div>
</div>

Angular Youtube Player - 适合 100% 的高度 #1 height=

Angular Youtube Player - 适合 100% 的高度 #1 height="100%" 或 height="100vh"#2 动态高度#3 移动 videoHeight

如何解决Angular Youtube Player - 适合 100% 的高度 #1 height="100%" 或 height="100vh"#2 动态高度#3 移动 videoHeight

我在 Angular 11 项目中使用了 Youtube Angular 包。我想将播放器填充到 div 高度的 100%，这是一个 TailWind h-full div：

<div#videoContainer>
    <youtube-player
            *ngIf="videoId"
            [videoId]="videoId"
            width="100%"
            [height]="videoHeight"
    ></youtube-player>
</div>

我已经尝试以两种不同的方式来做到这一点：

#1 height="100%" 或 height="100vh"

两者都导致：

#2 动态高度

[height]="videoHeight"

ngOnInit() {

    this._params = this._route.params.subscribe((params) => {
        this.videoId = params[''videoId''];
    });

}

ngAfterViewInit(): void {
    this.videoHeight = this.videoContainer.nativeElement.offsetHeight;
}

这有效，但会导致

错误：NG0100：ExpressionChangedAfterItHasBeenCheckedError：检查后表达式已更改。以前的值：''未定义''。当前值：''905''..

#3 移动 videoHeight

我将 this.videoHeight = this.videoContainer.nativeElement.offsetHeight; 移至构造函数，在 OnInit 中这导致：

TypeError: 无法读取新 YoutubeComponent 中未定义的属性“nativeElement”

我做错了什么？

解决方法

  1. 试试height="100vh"
  2. 尝试在声明期间或在 videoHeight 中为 constructor 赋值 或在 ngOnInit 钩子中。
,

删除在模板代码中设置 width 和 height 的任何尝试 -

<div>
    <youtube-player *ngIf="videoId" [videoId]="videoId"></youtube-player>
</div>

也来自组件代码。然后它应该自动显示为全高。

C# 求 1-100 的质数，100-1000 的水仙花数，1-100 所有的平方和平方平方根

C# 求 1-100 的质数，100-1000 的水仙花数，1-100 所有的平方和平方平方根

// 你们的鼓励是我最大的动力 大家可以多留言评论  在接下来很长一段时间我会从初级到高级每天更新 大家有想学习的内容也可以留言哦

// 现在是我做 C# 老师的第 28 天，希望和大家一起努力 加油

using System;

using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace FOR
{
class Program
{
static void Main(string[] args)
{
//1 求出 1~100 之间的质数 什么是质数 。 质数：从 2 开始除了 1 和它本身不能被任何数整出的数叫做质数比如 2，3，5，7

int count = 0;// 计算器
for (int i = 2; i <= 100; i++)
{
bool zhi = true;
for (int j = 2; j < i; j++)
{
if (i % j == 0)
{
zhi = false;
break;
}
}
if (zhi == true)
{
count++;
Console.WriteLine ("1-100 以内的质数有 {0}", i);
}
}
Console.WriteLine ("1-100 以内的质数总共有 {0} 个", count);

//2 求出 100-1000 以内的水仙花数 什么是水仙花数？ 水仙花数："153 = 1 * 1 * 1 + 5 * 5 * 5 + 3 * 3 * 3"
for (int k = 100; k < 1000; k++)
{
int ge = k % 10;
int shi = ((k-ge)%100)/10;
int bai =(k-(ge+shi*10))/100;
int sxh = bai * bai * bai + shi * shi * shi + ge * ge * ge;
if (k == sxh)
{
Console.WriteLine ("100-1000 以内的水仙花数有 {0}", k);
}

}

// 求出 1-100 的平方和平方根
for (int h = 1; h < 100; h++)
{
int pf = h * h;
double pfg = Math.Sqrt(h);
Console.WriteLine ("{0} 的平方是 {1}，平方根是 {2}",h,pf,pfg);
}
}
}
}

CSS 100％高度，填充 / 边距 - CSS 100% height with padding/margin

CSS 100％高度，填充 / 边距 - CSS 100% height with padding/margin

问题：

This has been driving me crazy for a couple of days now, but in reality it''s a problem that I''ve hit off and on for the last few years: With HTML/CSS how can I make an element that has a width and/or height that is 100% of it''s parent element and still has proper padding or margins? 这让我疯狂了好几天了，但实际上这是我在过去几年中一直存在的问题：使用 HTML / CSS 我怎样才能制作出具有宽度和 / 或宽度的元素高度是它的父元素的 100％，仍然有适当的填充或边距？

By "proper" I mean that if my parent element is 200px tall and I specify height = 100% with padding = 5px I would expect that I should get a 190px high element with border = 5px on all sides, nicely centered in the parent element. 通过 “正确” 我的意思是，如果我的父元素是 200px 高，我指定 height = 100% ， padding = 5px 我希望我应该获得一个 190px 高元素， border = 5px 的所有边，很好地居中在父元素。

Now, I know that that''s not how the standard box model specifies it should work (although I''d like to know why, exactly...), so the obvious answer doesn''t work: 现在，我知道那不是标准盒子模型指定它应该如何工作（虽然我想知道为什么，确切地说......），所以明显的答案不起作用： 

#myDiv {
    width: 100%
    height: 100%;
    padding: 5px;
}

But it would seem to me that there must be SOME way of reliably producing this effect for a parent of arbitrary size. 但在我看来，必须有一些方法可以为任意大小的父母可靠地产生这种效果。 Does anyone know of a way of accomplishing this (seemingly simple) task? 有谁知道完成这个（看似简单）任务的方法？

Oh, and for the record I''m not terribly interested in IE compatibility so that should (hopefully) make things a bit easier. 哦，为了记录，我对 IE 兼容性并不十分感兴趣，所以应该（希望）让事情变得更容易一些。

EDIT: Since an example was asked for, here''s the simplest one I can think of: 编辑：自从一个例子被要求，这是我能想到的最简单的一个： 

<html style="height: 100%">
    <body style="height: 100%">
        <div style="background-color: black; height: 100%; padding: 25px"></div>
    </body>
</html>

The challenge is then to get the black box to show up with a 25 pixel padding on all edges without the page growing big enough to require scrollbars. 接下来的挑战是让黑盒子在所有边缘都显示 25 像素的填充，而页面不会变得足够大以至于需要滚动条。

解决方案：

参考一： https://stackoom.com/question/22Nv/CSS - 高度 - 填充 - 边距
参考二： https://oldbug.net/q/22Nv/CSS-100-height-with-padding-margin

关于html – CSS 100％的高度,绝对定位top 0 bottom 0和css设置绝对定位设置距离的问题我们已经讲解完毕，感谢您的阅读，如果还想了解更多关于100vh 不会使立柱达到 100% 的高度、Angular Youtube Player - 适合 100% 的高度 #1 height="100%" 或 height="100vh"#2 动态高度#3 移动 videoHeight、C# 求 1-100 的质数，100-1000 的水仙花数，1-100 所有的平方和平方平方根、CSS 100％高度，填充 / 边距 - CSS 100% height with padding/margin等相关内容，可以在本站寻找。

本文标签：

上一篇html – CSS – Internet Explorer和标签背景（html标签背景图片）

下一篇html – CSS：不属性（让css属性不生效）

相关文章