首页 \ 问答 \ CSS:如何调整底部使用float属性和自动宽度和高度的两个div对齐(CSS: How to adjust two divs align at bottom which use float property and auto width and height)

CSS:如何调整底部使用float属性和自动宽度和高度的两个div对齐(CSS: How to adjust two divs align at bottom which use float property and auto width and height)

我正在使用5个div:

  • 主要Div(作为包装,宽度和高度设置为auto
  • sub div(包含两个div,红色和蓝色, width:75%height:auto
    • 红色div( height:90% width:auto)
    • 绿色div( height:10% width:auto
  • 蓝色div( width:25% height:auto

如下所示:

图片

当前宽度和高度设置div相互比例响应。

但问题是如果我设置height:89% bottom-margin:1%红色div的bottom-margin:1% ,那么它们不会产生相同的输出,包含红色和绿色的子div,如果veiwport小而且变得比蓝色短,则获得更高的高度div如果视口是大屏幕。

我想调整它,以便绿色div保持相应的调整,蓝色div一直在底部,无论我使用什么设备。

现在不幸的是,我的code似乎不适用于fiddlesnippet不起作用,但它适用于我的浏览器, liveweave.com也是如此。

这是liveweave.com上的工作示例

这是我的完整代码:

HTML:

<body>
  <div class="main">
    <div class="sub">
      <div class="red"></div>
      <div class="green"></div>
    </div>
    <div class="blue"></div>
  </div>
</body>

CSS:

.main{
  width: auto;
  height: auto;
 }
.sub{
  width: 75%;
  height: auto;
  float: left;
}
.red{
  width: 100%;
  height: 85%;
  background-color: red;
}
.green{
  width: 100%;
  height: 15%;
  background-color: green;
}
.blue{
  width: 25%;
  height: 100%;
  background-color: blue;
  float: right;
}

I'm working with 5 divs:

  • Main Div (works as wrapper, width and height set to auto)
  • sub div (contains two divs, red and blue, width:75% and height:auto)
    • red div (height:90% width:auto)
    • green div (height:10% width:auto)
  • blue div (width:25% height:auto)

as shown below:

Image

with current width and height settings divs are proportionally responsive to each other.

but problem is if I set height:89% bottom-margin:1% of red div, then they do not produce the same output, sub div which contains red and green, get more height if veiwport is small and it becomes shorter than blue div if viewport is large screen.

I want to adjust it in such a manner that green div remains adjusted accordingly with blue div at bottom all the time, no matters what device i'm using.

Now unfortunately my code doesn't seem to work with fiddle and neither does snippet work, but it works on my browser and so does on liveweave.com.

here is working example on liveweave.com

here is my complete code:

HTML:

<body>
  <div class="main">
    <div class="sub">
      <div class="red"></div>
      <div class="green"></div>
    </div>
    <div class="blue"></div>
  </div>
</body>

CSS:

.main{
  width: auto;
  height: auto;
 }
.sub{
  width: 75%;
  height: auto;
  float: left;
}
.red{
  width: 100%;
  height: 85%;
  background-color: red;
}
.green{
  width: 100%;
  height: 15%;
  background-color: green;
}
.blue{
  width: 25%;
  height: 100%;
  background-color: blue;
  float: right;
}

原文:https://stackoverflow.com/questions/42608841
更新时间:2020-03-26 12:20

最满意答案

您可以使用Flexbox创建此布局。 Flexbox默认会使flex-items高度相同,所以如果增加blue div的高度,它也会增加sub div的高度。

body {
  margin: 0;
}
.main {
  min-height: 100vh;
  display: flex;
}
.blue {
  background: blue;
  flex: 1;
}
.sub {
  flex: 3;
  display: flex;
  flex-direction: column;
}
.red {
  flex: 1;
  background: red;
}
.green {
  background: green;
  flex: 0 0 10%;
}
<div class="main">
  <div class="sub">
    <div class="red"></div>
    <div class="green"></div>
  </div>
  <div class="blue"></div>
</div>


You can use Flexbox to create this layout. Flexbox will make flex-items same height by default so if you increase height of blue div, it will increase height of sub div also.

body {
  margin: 0;
}
.main {
  min-height: 100vh;
  display: flex;
}
.blue {
  background: blue;
  flex: 1;
}
.sub {
  flex: 3;
  display: flex;
  flex-direction: column;
}
.red {
  flex: 1;
  background: red;
}
.green {
  background: green;
  flex: 0 0 10%;
}
<div class="main">
  <div class="sub">
    <div class="red"></div>
    <div class="green"></div>
  </div>
  <div class="blue"></div>
</div>

2017-03-05

相关文章

更多

最新问答

更多
  • css在元素之前中断列而不破坏包装器(css break column before element without breaking the wrapper)
  • 如何在Xamarin共享项目中使用自定义渲染器(How to use Custom Renderer in Xamarin Shared Project)
  • 如何为特定表中的特定字段设置唯一?(How to set unique for specific field from specific table?)
  • Google SDK iOS - sign()方法完成处理程序(Google SDK iOS - sign() method completion handler)
  • 在具有接口{}值的地图上实现String()(Implement String() on a map with interface{} values)
  • 检查数据库中是否已存在用户名(Check if username already exist in DB)
  • 使用javascript进行ajax调用时阻止用户交互(Block user interaction while doing ajax call using javascript)
  • 什么'if(err)'在Javascript中精确测试?(What does 'if (err)' tests precisely in Javascript?)
  • jQuery mouseleave无法正常工作(jQuery mouseleave not working)
  • 寻求使用的一些说明(Seeking some clarification on use of )
  • 将数组传递给注释的语法(syntax for passing array to annotation)
  • 用于从两个日期范围之间的文件中提取数据的Shell脚本(Shell script to extract data from file between two date ranges)
  • 元素隐藏但父()没有(Element hides but parent() not)
  • 如何使用Google App Engine Java平台开发web ui(How to develop web ui with Google App Engine Java platform)
  • 对于OWL A级;(For an OWL class A; Getting all properties that A is their domain)
  • Excel VBA公式格式问题(Excel VBA Formula Format Issue)
  • ORA - 02287序列号不允许在这里(ORA - 02287 sequence number not allowed here)
  • Github拉忽略特定文件(Github Pull Ignore Specific File)
  • SQL CONVERT函数在SQL Server中工作但不在应用程序中(SQL CONVERT function working in SQL Server but not in application)
  • backbone.js适用于大型应用程序(backbone.js for large applications)
  • 防止程序关闭(Preventing program from closing)
  • 生成不带图像的heightMap(Generating a heightMap without an Image)
  • Bootstrap - 如何将包含文本的div居中?(Bootstrap - How to center div that has text inside it?)
  • Android - 片段findViewById()总是null?(Android - Fragment findViewById() always null?)
  • 确定CSS中的高度(Figuring out heights in CSS)
  • 使用__autoload包含类和使用命名空间(Use __autoload to include class and use namespace)
  • setTimeout()不允许我传递文本值[重复](setTimeout() doesn't allow me to pass text values [duplicate])
  • 在NSUserDefault中恢复值(Restoring value in NSUserDefault)
  • 知道如何将这种下沉的悬停效果添加到图像/链接吗?(Any idea how to add this sinking hover effect to an image/link?)
  • 在XIB中淡入/淡出UISegmentedControl(fade in/fade out UISegmentedControl in XIB)