个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
试图让正文占据页面的 100% 减去页眉和页脚。已经设法使它起作用，但是如果我明智地拉伸(stretch)页面宽度，则带有 % 值的高度和底部边距 css 会以意想不到的方式通过收缩或扩展来表现。至少对我来说这没有任何意义，因为 parent 根本没有改变大小，非常感谢一些见解。
示例:https://gfycat.com/KeenOnlyKawala
CSS:
.body {
margin: 0;
top: 100px;
bottom: 50px;
}
.row, .col {
overflow: hidden;
position: absolute;
}
.row {
left: 0;
right: 0;
}
.col {
top: 0;
bottom: 0;
}
.scroll-x {
overflow-x: auto;
}
.scroll-y {
overflow-y: auto;
}
.Header.row {
height: 100px;
top: 0;
}
.Footer.row {
height: 50px;
bottom: 0;
}
.SideBar {
display: inline-block;
height: 100%;
width: 200px;
background-color: #1a1a1a;
}
.SideBarButton {
display: inline-block;
height: 100px;
width: 20px;
margin-left: -5px;
margin-bottom: 55%;
background-color: black;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
.Editor {
display: inline-block;
}
.RightArrow {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-left: 10px solid white;
border-bottom: 5px solid transparent;
margin-left: 2px;
margin-top: 50%;
}
asp.net 布局:
<body>
<div class="Header row"></div>
<div class="body row">
@RenderBody()
</div>
<div class="Footer row">
</div>
</body>
索引:
<div class="SideBar">
</div>
<div class="SideBarButton">
<div class="RightArrow"></div>
</div>
<div class="Editor">
</div>
最佳答案
抱歉，我没有仔细阅读您的原始问题。 .SideBarButton 的 margin-bottom 仍然是 55%，因此随着 .body 宽度的增加，底部边距也会增加。因为 .SideBar 和 .SideBarButton 上的垂直对齐都是默认设置，所以较大的底部边距有效地将 .SideBar 推低了。高度实际上设置正确，但由于 .row 具有 overflow:hidden 而在底部被裁剪。
在下面的代码中，我只是将 .SideBar 设置为 vertical-align: top; 我不确定这是否是您想要的结果。
.body {
margin: 0;
top: 100px;
bottom: 50px;
}
.row,
.col {
overflow: hidden;
position: absolute;
}
.row {
left: 0;
right: 0;
}
.col {
top: 0;
bottom: 0;
}
.scroll-x {
overflow-x: auto;
}
.scroll-y {
overflow-y: auto;
}
.Header.row {
height: 100px;
top: 0;
}
.Footer.row {
height: 50px;
bottom: 0;
}
.SideBar {
display: inline-block;
height: 100%;
width: 200px;
background-color: #1a1a1a;
vertical-align: top;
}
.SideBarButton {
display: inline-block;
height: 100px;
width: 20px;
margin-left: -5px;
margin-bottom: 55%;
background-color: black;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
.Editor {
display: inline-block;
}
.RightArrow {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-left: 10px solid white;
border-bottom: 5px solid transparent;
margin-left: 2px;
margin-top: 50%;
}<body>
<div class="Header row"></div>
<div class="body row">
<div class="SideBar">
</div>
<div class="SideBarButton">
<div class="RightArrow"></div>
</div>
<div class="Editor">
</div>
</div>
<div class="Footer row">
</div>
</body>关于html - 高度 100% 在拉伸(stretch)页面宽度时表现异常，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37033104/
24
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 我要做的第一件事
我是一名优秀的程序员,十分优秀！