草庐IT

html - 让左边的 div 占用剩余的宽度而不交换元素

我有2个并排的div。右侧的div具有固定宽度。即使调整窗口大小时,左侧的div也应填充剩余空间。示例:+---------------------------------++---------------+|||||divLeft||divRight||||120px|||||+---------------------------------++---------------+......有asolutionthatusesfloat:rightontherightelement但它需要像这样重新排序元素:......是否有不需要重新排序元素的解决方案?我处于重新排序它们会导致其他

html - 让<div>填充剩余高度

这是Bootstrap3。我只想拆分我的sidebar分为两部分。底部应足够高以容纳内容,而顶部应填充父级的剩余高度。以下是我用有限的HTML/CSS能力可以实现的最接近的结果:我的HTML:ShouldfilltheremainingheightoftheparentShouldbehighenoughtofititscontentsAfewlinesoftextAfewlinesoftextAfewlinesoftextAfewlinesoftext我的CSS:.sidebar{position:fixed;top:0;bottom:0;left:0;display:block;}

html - 我如何告诉我的 HTML 两个元素应该占据剩余可用宽度的其余部分?

我在一个较大的DIV中有三个输入字段和一个搜索图形我希望第三个搜索字段和放大镜图标占据剩余的宽度,因为当我尝试像我在这个Fiddle—https://jsfiddle.net/stndbt2u/2/中所做的那样指定宽度时,放大镜图形换行到下一行,即使有足够的空间来展示一切。如何始终将放大镜和第三个搜索字段保持在同一行上,并让它们占据剩余的可用宽度?请注意,如果小于580像素(父容器的最大宽度),则最好将第三个搜索字段和放大镜换行到下一行。 最佳答案 如果您愿意满足于仅使用CSS的解决方案并牺牲与旧版浏览器的某种程度的不兼容性,那么C

html - 将最后一个 li 扩展到 ul 的剩余宽度?

我一直对这个问题感到困惑。这是我现在拥有的:-------------------------------------------------------------------------------|||||Item1|Item2|Lastitem|||||-------------------------------------------------------------------------------那里,最后一个li只占了ul的一部分。我需要它看起来像这样:--------------------------------------------------------

javascript - HTML CSS 剩余空间

如何在不知道内容有多高的情况下让页脚占据页面的剩余垂直空间?我不知道如何使用javascript/css来完成这个...只是为了清楚...场景1:内容在页面中途结束,页脚将占据剩余的一半。不需要滚动条。场景2:内容占11/2页,页脚只占它需要的部分(~200px)。需要滚动条。哦,我愿意用jQuery的方式来做这件事。 最佳答案 您始终可以尝试使用jQuery来检测浏览器窗口的高度,然后从中减去内容高度,为页脚指定一个以像素为单位的高度。虽然在不同尺寸的显示器上会有所不同。要获取浏览器高度,并将其存储为变量,您可以使用:varbro

css - 如何让 Canvas 占用 100% 的剩余空间?

类似于iwantadivtotake100%height,100%宽度,或两者兼而有之。我希望Canvas具有100%的宽度和100%的高度:(LinktoJsFiddleforyourperusal)标记:CSS:html{width:100%;height:100%;}body{width:100%;height:100%;margin:0;}#canvasContainer{width:100%;height:100%;background-color:green;}#myCanvas{width:100%;height:100%;}Javascript:varcanvas=do

css - 如何使用css使div填充剩余的垂直空间

我正在尝试制作一个标准的网站布局,其中包含一个标题、一个导航栏和一个正文(在导航栏的右侧))和一个页脚。到目前为止,我已经这样做了:Test.header{float:top;width:100%;height:75px;}.navbar{float:left;width:20%;height:100%;height:100%;min-height:100%;overflow:scroll;}.body{float:right;width:80%;height:100%;min-height:100%;overflow:scroll;}.footer{float:bottom;widt

css - div 填充剩余水平空间

我有以下代码:thiswidthisdynamic.soisthisbecauseofthistable.andsoisthis.butthisguyneedstofilltheremainingwidth.Image这3个元素-ul和2个div-并排对齐,如您所见,它们具有动态宽度。我必须让这3个元素适合div.parent,其宽度固定为1200px。目前,我正在使用“float:left;”并排对齐这3个元素,我可以使用“display:inline-block;”如有必要[完美运作]。但我尝试在“显示:表格;”中使用一些技巧对于父级和“显示:表格单元格;”对于这3个元素,没有成功

javascript - 将 div 的高度设置为标题下剩余空间的 100%

我有2个div:页面顶部的标题div,设置高度为150px。位于标题div下方的容器div。我希望容器div是动态的,并将大小调整为标题div下方剩余空间的100%。我尝试输入height:100%但这会使页面需要滚动。我认为它使div成为浏览器高度的100%,而不是剩余主体高度的100%。我怎样才能使容器div简单地将其高度调整为剩余的正文空间?请在下面找到相关代码:body,html{margin:0;height:100%;}#header{width:100%;height:150px;background-color:#999999;}#container{width:760

html - CSS 网格,其中一列缩小以适合内容,另一列填充剩余空间

我需要创建一个水平布局,其中一个block占用所有可用空间,而其他block缩小以适合其内容。例如:LongtextlabelButton一个更复杂的两行示例(一个实际的网格):........................我的要求:即使很短,大块也应该填满所有可用空间小块应该适合他们的内容大块(通常是文本标签)可能比可用空间大一个词,因此在这种情况下应将其截断如果是多词,大块不应该换行小块不应该换行(尽管在多个按钮或图标的情况下,这可以通过为每个组件制作一个block来解决)支持多行(即列应该对齐)我的目标是Android和iOS智能手机。我尝试改编来自thisanswer的代码但