个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我这里有一个简单的文件。当页面尺寸小于屏幕尺寸时，我希望页脚留在底部。
始终不粘在底部。它必须是最后一件事。如果内容小于屏幕高度，则它必须留在屏幕底部。
我尝试添加 min-h-screen至 <main> .但它会产生大量空间并将页脚推离屏幕。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Primary Meta Tags -->
<title>ABC Blog</title>
<script src="https://cdn.tailwindcss.com"></script>
<body style="background-color:#f8f7f3;">
<header class="bg-white px-2 sm:px-4 py-2.5 fixed w-full z-20 top-0 left-0 border-b border-gray-200">
<div class="container flex flex-wrap justify-between items-center mx-auto">
<a href="#" class="flex items-center">
<span class="self-center text-2xl font-semibold whitespace-nowrap">ABC</span>
</a>
</div>
</header>
<main>
<div class="container mx-auto px-5 md:max-w-screen-lg mt-20 md:mt-36">
<div class="p-6 text-center mb-10 md:mb-20">
<h1 class="text-3xl">Blog - Articles, Insights, Tips and Tools</h1>
</div>
<a href="#/shopify-dawn-theme-hidedisable-add-to-cart-popup">
<div class="px-6 py-3 border-2 border-white rounded-lg space-y-2 hover:shadow mt-2">
<h2 class="text-xl font-medium">Lorem ipsum dolor sit amet.</h2>
<p class="py-3 md:py-0 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur at viverra justo. In ut tellus laoreet, iaculis velit in, imperdiet.
</p>
<div class="flex space-x-2 text-xs">
<p class="text-gray-500">Oct 13, 2022</p>
<p>|</p>
<p>John</p>
</div>
</div>
</a>
</div>
</main>
<footer class="w-full p-4 bg-white shadow md:flex md:items-center md:justify-between md:p-6 mt-20">
<span class="text-sm sm:text-center">© 2022 <a href="#" class="hover:underline">ABC</a>.
All Rights Reserved.
</span>
</footer>
</body>
</html>最佳答案
你应该让主体成为一个 flex 容器(列方向)并且页脚总是最后出现。检查此链接，您会找到一个解释清楚的答案: here
关于css - 当页面大小小于 VH 时，Tailwind CSS 如何使页脚停留在底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/74078603/
27
4
0
我正在制作我的第一个作品集，但在做两件事时遇到了一些麻烦。 创建一个固定的导航栏。当我使用 position: fixed;它清除了我在右侧“联系我”上的 float ，一切都崩溃了。在我的示例中，我
如果我想使用这个 JavaScript 命令: window.scrollBy(0,50); 它向下滚动页面 50px。 是否有一个简单的相当于向下滚动页面 50vh 的方法？这行不通 window.
我对像 vh/% 这样的高度单位有疑问。当任何 input 处于事件状态时，移动设备上的键盘会更改元素高度。我正在寻找在键盘处于事件状态时将其更改为静态高度的解决方案。 jsfiddle (在移动设备
:) 我有一个响应式标题。 这是英雄部分的代码: .hero { background: url(../../img/hero.jpg); background-size: cover
我有一个在悬停时出现的伪元素: height: 0.4vh; 高度不会改变，只有宽度会改变。然而，出于某种原因，在某些条件下，不同伪元素的高度不同(此处的两条较暗的线都有 height: 0.4vh)
我最近发现自己弄乱了“vh”css:它似乎很有效，但我知道大多数旧浏览器都不支持它。我想知道是否有人可以启发我对此的任何替代方案:我知道 @media 查询的存在，但我不知道它们如何帮助我解决我的问题
我有一些元素作为图层工作(所有元素都是绝对定位的并且带有 z-index)。 主要的问题是，我有一张图片应该放在 我的视口(viewport)高度 (vh) 的底部 0 我已经尝试过底部定位、垂直对齐
我实际上是在尝试创建一个导航栏。 但是我希望它大约为 7vh，并且我希望字体可以随之调整。问题是小的悬停效果边框不会一直完美对齐(全屏显示)。 如果有人知道如何解决这个问题，我们将不胜感激。 * {
我对 CSS 非常陌生，我正在通过教程构建我的第一个网站。无论出于何种原因，我的标题背景图片都不会加载。我仔细检查了我的图像路径。我试过从类似问题中复制和粘贴代码，但似乎没有任何效果。 这是代码。 h
这个问题在这里已经有了答案: How to set a percentage height value in HTML/CSS (7 个答案) 关闭 4 年前。
我正在尝试实现以下布局(图 1)，其想法是根据屏幕(台式机和笔记本电脑屏幕)保持相同的结构和比例 但是，在我当前的代码中，它在台式机上看起来不错，但我不知道在不更改布局的情况下保留笔记本电脑屏幕中元素
代码 JS: var windowheight = $(window).outerHeight(); var meniu= $('.navbar-fixed-top').outerHeight()
有没有一种方法/jQuery 方法可以单独测量视口(viewport)高度？ 本地址栏显示时一个 vh，本地址栏隐藏时另一个 vh？ var vhAdBarPresent = $(window).he
我将一个元素的最大高度设置为 65vh。我需要在我的 JavaScript 中将它转换为像素，以查看图像是否适合那里，或者我是否需要缩小/裁剪它。 (正在做 win8 App 开发)。 这行得通吗？
我试图创建一个仅使用 vh 大小的登录表单。这样做是希望整个表单能够根据视口(viewport)进行缩放。 没有!出于某种原因放大，在输入字段和下面的文本之间会创建一个空白区域，该空白区域会随着放大程
例如，浏览器有哪些限制？如果我有 99999999999999 vh，它实际上是 99999999999999 vh 还是像 2145629vh 这样奇怪的东西？ 最佳答案 从视口(viewport)
我想知道是否有一个字体大小单位可以测量页面宽度和高度的 1%？我认为这会让我更容易，并帮助我做我想做的事情，而不必使用 JavaScript(尽管任何答案都是可以接受的，只要它有效)。如果没有这样的单
当使用 CSS vh 和百分比定义元素(例如 div)的高度时，如果内容溢出元素，元素是否会拉伸(stretch)。 在我的笔中，我正在尝试为底部的 div(其 ID 为 contact)填写内容。但
我正在尝试创建一个占视口(viewport)固定百分比的侧边栏。在侧边栏内，我想要一个固定在顶部的元素，而如果其他内容占用的垂直空间大于侧边栏高度，则它会滚动。 在此示例中，h1 元素保留在父元素的顶
我正在尝试让 .navbar 占据屏幕的一半，但它没有正确显示。我不确定为什么？我猜还有另一个容器，但我不确定为什么？ 我将 body 设置为 100vh 以覆盖屏幕 我有 .navbar 一半使用百
我是一名优秀的程序员,十分优秀！