html使用百分比布局怎么保证左右高度相同？

Posted 2023-05-17

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html使用百分比布局怎么保证左右高度相同？相关的知识，希望对你有一定的参考价值。

如果在html中使用百分比布局，并且使用媒体查询去动态改变文字大小，怎么保证左右栏div的高度相同？如下示例：
<style type="text/css">
#wrapper
width:100%;

#left
float:left;
width:30%;

#left img
max-width:100%;
max-height:200px;

#right
float:right;
width:70%;

p

font-size:...

</style>
<div id="wrapper">
<div id="left">
<img src="..." />
<p>some textsome textsome textsome textsome textsome text</p>
<p>some textsome textsome textsome textsome textsome text</p>
</div>
<div id="right">
<p> some textsome textsome textsome textsome textsome text</p>
<p> some textsome textsome textsome textsome textsome text</p>
<p> some textsome textsome textsome textsome textsome text</p>
<p> some textsome textsome textsome textsome textsome text</p>
</div>
</div>
上面这个例子，如果我仔细调节字体大小以及图片高度时，可以在一定宽度下使左右高度相同，但是如果改变浏览器宽度，可能又会出现左右高度不同。这个怎么解决？

这种情况应该只能结合js来调整了吧。
分别获取左右两栏的高度，对比，得到最高的那栏，将低的一栏设定为高的那栏就好。

js：
var LH = document.getElementById( "left" ).offsetHeight;

var RH = document.getElementById( "right" ).offsetHeight;

if(LH > RH)
document.getElementById( "right" ).style.height = LH;

else
document.getElementById( "left" ).style.height = RH;

但是这个有个弊端，需提前知道各自是否设定了padding值，有设定的话，还得减去该值。

可以使用jq获取padding值的。
jq：
var lh = $("#left").height();//绝对高度，不包括padding-top和pm
var lhpt = $("#left").css('padding-top').replace("px", "");
var lhpm = $("#left").css('padding-bottom').replace("px", "");
var rh = $("#right").height();
var rhpt = $("#right").css('padding-top').replace("px", "");
var rhpm = $("#right").css('padding-bottom').replace("px", "");
var lh2 = lh + lhpt + lhpm;
var rh2 = rh+rhpt + rhpm;

if(lh2 > rh2)
$("#right").height(lh2 - rhpt - rhpm);
else
$("#left").height(rh2 - lhpt - lhpm);
//就是得计算多个值来比较追问

我是做响应式布局的，如果使用这个方法的话，就需要用定时器定时获取当前尺寸，然后进行相应的调整，感觉这样为了高度一致使用定时器牺牲了性能，所以还有没有别的方法了？不然页面只能左右高度不一致，导致一边留有空白了。

追答

还看到一种更简单的jq计算！
var m = Math.max(
$('#left').height(),
$('#right').height()
);
$('.content').height(m);//right and left has ".content" class

//////实在不要的，看下面的
http://www.w3cplus.com/css/creaet-equal-height-columns
参考这里看看

参考技术A 给父节点设置固定高度给左右div设置100%的高度

Android如何实现同一个布局保证高度不变,使用不同高度的背景

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

背景

预实现一个切换tab，实现选中与未选中的背景切换，特别之处在于选中背景图和未选中背景图高度不相同，切换之后需要在java代码中动态设置LayoutParams改变高度。

预期效果

当前问题点

选中背景为.9图，未选中背景为xml中通过shape实现。

将当前ViewGroup设置为选中状态的固定高度

选中效果正确，但是未选中背景会与选中背景同高，底部边框并未与选中背景平齐，如图

通过设置下边距实现

设置padding与margin都无效，具体原理简单来说就是我设置的是ViewGroup的背景，padding针对于ViewGroup的子元素有效，margin针对于ViewGroup的父元素有效，所以均无法实现

将ViewGroup的高度设置为wrap_content

设置成自适应需要将未选中的shape设置高度，但是这样存在一个问题就是选中状态是一个.9图片无法做到固定高度，所以选中效果无效

那么，我们该怎么办呢，如果通过xml配置的方式来实现呢？

答案就是： layer-list！

问题分析

我们当前的难点就在于背景图的下边对齐问题，那么我们自然地就想到无外乎就是设置高度，调整边距来解决，上边已经阐述过了我们通过常规的padding和margin是不行的，设置高度也不行。

我们要解决问题的根本就是能不能给未选中的背景图设置一个下边距，让它无法撑满ViewGroup？

上边提到了我们未选中背景是一个shape，那我们可以在shape的外边套上一层layer-list，然后借助它的bottom属性设置边距就可以了！

问题解决

核心代码如下：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:bottom="6dp">
        <shape android:shape="rectangle">
            <stroke
                android:width="@dimen/dp_1"
                android:color="#ffdddddd" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</layer-list>

大功告成！