个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
25
4
我有一个父 DIV 和一个子 DIV，我想将其延伸到父 DIV 的底部。目前它没有，尽管有 height:auto!important; 可以看到说明该问题的屏幕截图 here .
相关HTML(作为Jade模板)如下:
.main.top0
.infoPanel.koneksa_bg_blue
.innerPanel.mtop0.mbottom0
.infoCaption.font8em.koneksa_white 404
.infoCaption.koneksa_white We can't find the page you are looking for
.infoCaption.koneksa_white
| Don't worry. Just try to go back or
a.koneksa_white.underline(href='/') home
.footer.stickyBottom.koneksa_bg_gray.koneksa_fg_light_gray
main DIV 是父级，infoPanel 是我正在努力拉伸(stretch)的子级(上图中蓝色部分)。
对应的CSS如下:
.main {
width:100%;
min-height:700px;
height:auto!important;
overflow: hidden;
z-index: 1;
top:3em;
position: relative;
}
.infoPanel {
width:100%;
height:auto!important;
display: block;
padding:0;
}
.innerPanel {
width:90%;
padding:40px 0;
height:auto!important;
margin:0 5%;
display: block;
}
我知道这是一个相当常见的问题，但答案似乎总是包含硬编码的高度。我想避免这种情况，因为虽然这是桌面样式的完美解决方案，但它旨在显示在移动设备上，因此我希望它比硬编码的高度更具响应性。
感谢您提供的任何见解。
编辑:
根据请求生成的 HTML:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html"></html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 0.8, user-scalable = yes">
// Imports removed
<link href="/assets/css/mvp.css" type="text/css" rel="stylesheet" media="screen and (max-width: 768px)">
<link href="/assets/css/mvp_wide.css" type="text/css" rel="stylesheet" media="screen and (min-width: 769px)">
</head>
<body class="tk-futura-pt koneksa_gray">
<div class="fullNav koneksa_bg_white boxShadow">
<div class="centerPanel">
<div class="mleft2 left khmoniker"></div>
<div class="menu right"><a href="/login" class="right mright2 menuItem">customer login</a></div>
</div>
</div>
<div class="main top0">
<div class="infoPanel koneksa_bg_blue">
<div class="innerPanel mtop0 mbottom0">
<div class="infoCaption font8em koneksa_white">404</div>
<div class="infoCaption koneksa_white">We can't find the page you are looking for</div>
<div class="infoCaption koneksa_white">Don't worry. Just try to go back or <a href="/" class="koneksa_white underline">home</a></div>
</div>
</div>
<div class="footer stickyBottom koneksa_bg_gray koneksa_fg_light_gray">
<div class="innerPanel">
<div class="caption left">
<h5 class="konekea_blue_gray mtop2">© template-filler</h5>
<div class="kh_reverse_logo mtop2"></div>
</div>
<div class="caption right"><a href="/terms.html" target="_blank" class="konekea_blue_gray mtop2">Terms</a><a href="/privacy.html" target="_blank" class="konekea_blue_gray mtop1">Privacy</a><a href="/" target="_blank" class="konekea_blue_gray mtop1">Corporate</a></div>
</div>
</div>
</div>
</body>
最佳答案
一种适用于所有现代浏览器的解决方案是执行以下操作:
html, body {
height: 100%
}
.main {
position: absolute;
top: 3em;
bottom: 0;
width: 100%;
}
这似乎是一个不寻常的解决方案，但现代浏览器实际上会尊重同时定义的所有 4 个边，并拉伸(stretch)元素以匹配。这是一个 jsFiddle 示例:http://jsfiddle.net/nqt7vqs1/2/
您也可以对所有子元素执行相同的操作，因为为了定位子元素，position: absolute 意味着 position: relative。
如果此解决方案不起作用，另一种选择是执行以下操作:
html, body {
height: 100%
}
.main {
position: absolute;
top: 0;
height: 100%;
margin: 3em 0 -3em 0;
overflow: hidden;
}
这是一种“隐藏边距”技巧，也适用于所有现代浏览器。使用这些设置的相同 Fiddle:http://jsfiddle.net/nqt7vqs1/3/
关于html - 将子 DIV 拉伸(stretch)到父级的高度(没有硬编码高度)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28307186/
25
4
0
我想创建一个随页面宽度变化的页眉。 我的标题由三部分组成，固定宽度的两侧和可拉伸(stretch)的中间部分。 我使用 displa
我正在尝试在导航栏下方创建一列内容，以便内容的宽度与导航栏的宽度完全匹配。事实证明这比我预期的要困难。 给定这样的东西: link
我有一个大小为 12*30 的字符串的图像。我想创建一个动画，让它给人一种拉伸(stretch)字符串的感觉。我通过缩放图像来做到这一点，但我面临的问题是缩放图像没有发生碰撞。它仅出现在原始图像大小的
在 Silverlight 中，如何拉伸(stretch) Line 的宽度以填充作为子元素的 StackPanel 的宽度？更喜欢 XAML 解决方案，而不是代码隐藏。这是我在 WPF 中的操作方法
QML 怎么可能？自动拉伸(stretch)元素以使其所有子元素都适合它？以及如何指定间距？例如，我想在文本周围有一个矩形。矩形应该有一些内部间距。 如果我写以下内容，则矩形的大小为 0,0。 Rec
我已经习惯了使用 matlab，现在正在尝试转换 matplotlib 和 numpy。 matplotlib 中是否有一种方法可以让您绘制的图像占据整个图形窗口。 import numpy as n
我有一个(简化的)2x2 网格，里面有三个控件。左控制在两行上延伸。
假设我有 3 个大小不匹配的列表，[3, 7, 6]、[12, 67, 89, 98] 和 [1, 2, 3, 4, 5, 6, 7]我想要一个函数来执行此操作: >>> stretch([3, 7,
如果 Image 被 Stretched，我可以获取 Height 和 Width 吗>UniformToFill? 我尝试了 Width 和 Height 属性，但它们始终是 NaN。 最佳答案 如
当我为微调器使用我自己的背景主题时，它是拉伸(stretch)图标。 我的微调器代码是: 我的 spinner.xml 是: 和我从 sdk 4 复制的图
我正在尝试在 OpenGL 中创建一个简单的 GUI。我创建了一张图片，以便我可以引用它并使解释更简单: 当我将按钮 (32x32) 的纹理应用到大小为 120x20 的四边形多边形(即不是矩形作为纹
SurfaceTexture 预览被拉伸(stretch)了!我正在开发一个 camera2 应用程序。每个设备都工作不好。视频和照片的预览被拉伸(stretch)。 public class Cam
我使用一些ImageButtons 创建了一个Android layout。我的布局在小屏幕(例如 3.6 英寸到 4.2 英寸)上运行良好，但是当我在 7 英寸或 9 英寸平板电脑上使用我的应用程序
我在拉伸(stretch) GridView 以适应显示宽度时遇到问题。任何人都知道如何解决这个问题？我希望 GridView 占据整个宽度，包括蓝色标记的字段(见下图)
我使用位图作为 Activity 的背景。自定义背景代码为: 但是它位于中间，并没有占据整个屏幕空间。我怎样才能让它填满所有可用空间？我尝试将宽度和高度设置为 fill_parent。 谢谢 最
所以我最近一直在为 iOS 开发应用程序，但遇到了一个难题。我正在制作一个迷你合成器，然后开始制作 GUI。我开始制作键盘(目前为 2 个 Octave )并测量了白键的大致长度。一切都很好，直到我在
好的，所以我在 slider 内有一个图像，但它不能正确缩放。 先小后伸，想一直伸到底，怎么实现？ 看一下截图(忽略第二张截图中的红色部分): 还有CSS: .slider-wrapper {
我有下面的 HTML，我希望容器 div 拉伸(stretch)到窗口的整个高度。这对 wine 有效，但是当您移除容器内的两个蓝色 div 时会发生什么？容器延伸到其中蓝色 div 的底部，但不会延
我正尝试在 this example 之后制作背景，但我需要嵌套 2 个容器。 我的代码看起来像这样: XHTML:
这是关于用颜色填充背景。 我正在构建 this project 的 SwiftUI 版本.这是一个选项卡式应用程序(测试工具)。 This is my Working Project 我要做的第一件事
我是一名优秀的程序员,十分优秀！