当前位置：文江博客话题详情

如何制作全屏div，并防止内容改变大小？

发布于 2024-09-10 01:25:12 字数 163 浏览 7 评论 0原文

对于我的网络应用程序，我希望主 div 为全屏（宽度和高度 = 100%），并且无论内容如何，我希望它保持该大小。这意味着，如果内容不多，它不应该收缩，如果内容太多，它不应该推这个主div。

我该怎么做？

（我同意对这个 div 进行黑客攻击，只要它能保持内容不受黑客攻击）

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦里人 2024-09-17 01:25:12

或者甚至只是：

<div id="full-size">
  Your contents go here
</div>

html,body{ margin:0; padding:0; height:100%; width:100%; }
#full-size{
  height:100%;
  width:100%;
  overflow:hidden; /* or overflow:auto; if you want scrollbars */
}

（html、body 可以设置为 95%-99% 或类似的值，以解决边距等方面的轻微不一致问题。）

Or even just:

<div id="full-size">
  Your contents go here
</div>

html,body{ margin:0; padding:0; height:100%; width:100%; }
#full-size{
  height:100%;
  width:100%;
  overflow:hidden; /* or overflow:auto; if you want scrollbars */
}

(html, body can be set to like.. 95%-99% or some such to account for slight inconsistencies in margins, etc.)

回复收藏 0 原文

当梦初醒 2024-09-17 01:25:12

#fullDiv {
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    position: fixed;
}

#fullDiv {
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    position: fixed;
}

回复收藏 0 原文

五里雾 2024-09-17 01:25:12

请注意，其中大多数只能在没有 DOCTYPE 的情况下使用。我正在寻找相同的答案，但我有一个 DOCTYPE。然而，有一种方法可以使用 DOCTYPE 来做到这一点，虽然它不适用于我的网站的样式，但它适用于您想要创建的页面类型：

div#full-size{
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    overflow:hidden;

现在，这在前面提到过，但我只是想澄清这通常与 DOCTYPE, height:100% 一起使用；仅在没有 DOCTYPE 的情况下有效

Notice how most of these can only be used WITHOUT a DOCTYPE. I'm looking for the same answer, but I have a DOCTYPE. There is one way to do it with a DOCTYPE however, although it doesn't apply to the style of my site, but it will work on the type of page you want to create:

div#full-size{
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    overflow:hidden;

Now, this was mentioned earlier but I just wanted to clarify that this is normally used with a DOCTYPE, height:100%; only works without a DOCTYPE

回复收藏 0 原文

时光无声 2024-09-17 01:25:12

<html>
<div style="width:100%; height:100%; position:fixed; left:0;top:0;overflow:hidden;">

</div>
</html>

<html>
<div style="width:100%; height:100%; position:fixed; left:0;top:0;overflow:hidden;">

</div>
</html>

回复收藏 0 原文

烟凡古楼 2024-09-17 01:25:12

我使用这种方法来绘制模态叠加。

.fullDiv { width:100%; height:100%; position:fixed }

我认为这里的区别在于 position:fixed 的使用，它可能适用也可能不适用于您的用例。

我还添加了 z-index:1000;背景:rgba(50,50,50,.7);

然后，模态内容可以存在于该 div 内，并且页面上已有的任何内容在背景中仍然可见，但在滚动时被覆盖层完全覆盖。

I use this approach for drawing a modal overlay.

.fullDiv { width:100%; height:100%; position:fixed }

I believe the distinction here is the use of position:fixed which may or may not be applicable to your use case.

I also add z-index:1000; background:rgba(50,50,50,.7);

Then, the modal content can live inside that div, and any content that was already on the page remains visible in the background but covered by the overlay fully while scrolling.

回复收藏 0 原文

天生の放荡 2024-09-17 01:25:12

#fullDiv {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: hidden; /* or auto or scroll */
}

#fullDiv {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: hidden; /* or auto or scroll */
}

回复收藏 0 原文

天暗了我发光 2024-09-17 01:25:12

使用 HTML

<div id="full-size">
    <div id="wrapper">
        Your content goes here.
    </div>
</div>

并使用 CSS：

html, body {margin:0;padding:0;height:100%;}
#full-size {
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
}
#wrapper {
    /*You can add padding and margins here.*/
    padding:0;
    margin:0;
}

确保 HTML 位于根元素中。

希望这有帮助！

Use the HTML

<div id="full-size">
    <div id="wrapper">
        Your content goes here.
    </div>
</div>

and use the CSS:

html, body {margin:0;padding:0;height:100%;}
#full-size {
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
}
#wrapper {
    /*You can add padding and margins here.*/
    padding:0;
    margin:0;
}

Make sure that the HTML is in the root element.

Hope this helps!

回复收藏 0 原文

猫九 2024-09-17 01:25:12

这是我的解决方案，我认为最好使用 vh （视口高度）和 vw （视口宽度），与 高度 有关的单位和当前视口的宽度

function myFunction() {
  var element = document.getElementById("main");
  element.classList.add("container");
}

.container{
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: #333;
  margin: 0; 
  padding: 0; 
}

<div id="main"></div>
<button onclick="myFunction()">Try it</button>

Here is my Solution, I think will better to use vh (viewport height) and vw for (viewport width), units regarding to the height and width of the current viewport

function myFunction() {
  var element = document.getElementById("main");
  element.classList.add("container");
}

.container{
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: #333;
  margin: 0; 
  padding: 0; 
}

<div id="main"></div>
<button onclick="myFunction()">Try it</button>

回复收藏 0 原文

~没有更多了~

关于作者

灯角

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

如何制作全屏div，并防止内容改变大小？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（8）

关于作者

相关话题

热门标签

推荐作者

浪漫人生路

620vip

羞稚

走过海棠暮

你好刘可爱

陌若浮生

友情链接

如何制作全屏div，并防止内容改变大小？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（8）

关于作者

相关话题

热门标签

推荐作者

浪漫人生路

620vip

羞稚

走过海棠暮

你好刘可爱

陌若浮生

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。