问题标签 [liquid-layout]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
93 浏览

html - HTML + CSS:获取所有可用的viewpoer

我正在尝试使用标题制作液体 HTML 布局(采用所有可用宽度和 130 像素高度)、2 列(1:300 像素宽度所有可能的高度,2:第 2 列之后的所有可用宽度在它们之间占用 300 像素和 15-20 像素的边距)。

自动取款机我有这个:

HTML:

CSS:

问题是:有没有更好的解决方案?

谢谢。

0 投票
2 回答
604 浏览

css - 如何将此站点转换为移动站点或使其具有流动性?

我想知道是否有办法将静态页面转换为手机页面。通过移动页面,我的意思是可以将桌面内容拖到更小的窗口大小(例如智能手机大小:320px)。使内容跟随窗口的大小?我需要如何更改css?我需要怎么做数学?谢谢...我想必须有框架或工具才能做到这一点?

请提供一些指导和想法,我们将非常欢迎。

检查我的这个静态示例

谢谢你的时间!是/

0 投票
1 回答
982 浏览

css - 将溢出-y 添加到块元素会导致宽度减小。

这就是我所拥有的,我有左 div 和右 div。左边的 div 是一个固定的宽度,并且向左浮动。右 div 是一个“显示:块”,使其全宽,并在左侧有一个边距以补偿左 div。两个盒子都有一个固定的高度,并且需要是可滚动的(里面的内容)。我成功地向左 div 添加了一个溢出-y。但是,当我将 overflow-y: auto 添加到右侧 div 时,该 div 不再跨越整个 div。

添加溢出前:http: //jsbin.com/asecuy/

添加溢出后:http: //jsbin.com/asecuy/2

0 投票
4 回答
2231 浏览

drop-down-menu - dojo 显示/隐藏一个 ContentPane 而另一个 ContentPane 是流动的

几个星期以来,我一直在努力解决这个问题,所以我不确定这是不可能的,还是我缺乏编码能力……或者两者兼而有之。我不是程序员,我是 Dojo Toolkit 的新手。

我有一个使用 BorderContainer 布局的站点。我正在尝试创建一种效果,我可以使用按钮打开和关闭将包含控件的下拉类型框。我需要在页面加载时隐藏此下拉菜单,然后在单击按钮时打开。

我的问题是,当我打开下拉列表时,它会将其下方的内容窗格推离浏览器窗口的底部。当下拉菜单打开时,我需要下部 ContentPane 保持在浏览器窗口的剩余空间内。此外,我希望下拉菜单位于其下方内容的可滚动容器之外,这就是为什么我将其设置为位于其下方的嵌套 BorderContainer 之外的原因。

我创建了一个简化版本的代码来展示我的挑战(见下面的链接)。如果加载页面,您可以看到中心 ContentPane 滚动内容。但是,如果您随后单击该按钮,则会在内容上方展开一个下拉 div。然后,当您滚动时,您会注意到您看不到完整的窗格,因为它位于浏览器窗口底部下方的无人区。我假设因为 div 在加载时设置为 display:none,所以页面加载时不考虑它的大小。然后,当您通过按下按钮打开它时,它的大小是相加的,下面的窗格不知道如何调整大小或考虑新元素。

我试过使用可见性属性,但是当它仍然关闭时,它会给 div 留下一个空白。我已经修改了一些代码来控制显示承诺的高度,但是我的每个下拉框的大小都会不同,所以我更喜欢将高度设置为“自动”而不是指定的像素大小。

有谁知道我如何做到这一点,以便下部窗格适合空间而不会推开屏幕?

这是该页面的示例:

http://equium.com/scaffold.html

(我在尝试将完整的 HTML 页面作为代码示例插入此处时遇到了一些问题,因此,如果这是一种更好的处理方式,并且有人可以让我知道嵌入所有代码的最佳方式,我将不胜感激。)

谢谢提前,我真的很感激任何人的反馈。

0 投票
2 回答
1723 浏览

html - 如何使用 div 实现垂直液体布局

我的网站包含三个组件:

  • 跨越屏幕宽度的固定高度标题
  • 左侧标题下的固定宽度导航,跨越屏幕的剩余高度
  • 导航右侧的内容区域,占用任何剩余空间。

我了解如何实现液体布局的水平方面,以便导航保持固定,而内容区域占用剩余宽度,但我不明白如何实现液体布局的垂直方面,以便导航和内容区域至少占据剩余的高度,最多占据其内容的高度(假设这比屏幕高减去标题高度)。

可以用div吗?

0 投票
6 回答
105611 浏览

css - CSS容器div没有得到高度

我希望我的容器 div 获得其孩子高度的最大值。不知道孩子div的身高。我正在尝试JSFiddle。容器div为红色。这没有出现。为什么?

0 投票
3 回答
317 浏览

css - CSS Float div作为块而不是网格

请查看http://jsfiddle.net/Qu63T/1/上的小提琴

我想要的是漂浮在蓝色旁边的绿色 div。和.block显示为网格的 div。我不想删除.mdiv 并将.blocks 浮动在容器内。不指定宽度可以做什么.m

没有 JavaScript 只有 CSS 解决方案

0 投票
1 回答
4833 浏览

image - Safari 图像调整大小错误?盒子模型问题?

我正在使用 Mark Tyrell 的蓝莓插件创建一个液体 j-query 滑块(万岁!),但是在 IE 8 和 Firefox 7.01 和 Firefox 7.01 和歌剧 9.5。

您可以在http://development.carrollorganization.com/blueberry3.php看到(几乎)工作页面

在 Safari 中,缩略图图像不会缩小以适应容器的高度(称为缩略图的 div),并且不限于溢出:隐藏在该容器中。他们确实遵守了 div 的父级(一个 a 标签)中的 overflow:hidden 命令。最大的问题是拒绝重新调整大小以适应父 div 标签的高度。

老实说,我不知道这是 Safari 错误、盒子模型问题、用户错误(可能)还是所有这些的某种组合。我将不胜感激任何人都可以提供的帮助。如果我想

我的样式表是:

我的页面代码是(这是一个 php 页面,而不是 html):

0 投票
2 回答
974 浏览

css - CSS 3 Panel Liquid 布局内容间距

我有一个很好的工作 3 面板液体布局,但我只是注意到它有问题。

当有一个带有 float:left 的 div 和另一个带有 clear:both 的 div 时,清除的 div 下面的所有 div 都会被一直推到右列的高度。抱歉,在第 1 节和第 2 节之间有一个巨大的空间。

你可以在这里看到代码。jsfiddle.net/QbSsb/

是否有对此或 3 面板液体布局的锻炼?

在此先感谢,苏珊

0 投票
1 回答
1153 浏览

html - 无法将 div 的 CSS 高度调整为页面的 50%。我想要液体布局而不在任何地方使用任何 em 或像素

我正在尝试为页面设置液体布局,但在调整 div 的高度时遇到了很大的困难。我不想要一个固定的布局,因为我希望页面像手套一样适合,无论屏幕大小。我只使用百分比,没有像素或 em。页面布局如下所示:

现在,我想制作左栏,页面顶部 50% 的高度和左栏,页面的其他 50% 高度。问题是内容溢出并被截断,迫使我使用滚动条并设置像素高度。这不是我想要的。理想情况下,我想将 div 设置为页面的 50%,并在内容溢出时使用滚动条。那有意义吗?

我该怎么做?我真的很感激任何帮助。

非常感谢。