我有一个两侧分开的容器。在左侧有一个滑块,在右侧有一个输入的html表单。我的问题是我无法使html表单与所有电脑显示器上的滑块高度相同(高度通常比滑块短。 能不能帮我实现这个目标?
答案 0 :(得分:0)
在包含侧边栏和表单的容器div上使用flex。
html,body{
width:100%;
height:100%;
margin:0;
padding:0;
}
.con{
width:100%;
height:200px;
display:flex;
}
.side{
width:100px;
background-color:red;
}
form{
background-color:yellow;
height:100%;
}

<div class="con">
<div class="side">
this is the sidebar
</div>
<form>
form contains the input
<input type="text">
</form>
</div>
&#13;
答案 1 :(得分:0)
我为你制作代码。请查看以下链接:
https://jsfiddle.net/fatehjagdeo/sqxy4pv6/
或者您也可以查看下面的代码。此代码将从滑块获取高度并添加到表单div中:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<div>
<div class="leftside">
you slider here
</div>
<div class="rightside">
your form
</div>
</div>
<style>
.leftside{
background:#ccc;
height:200px;
}
.rightside{
background:#ff0000;
}
</style>
<script>
$(document).ready(function(){
var sliderHeight=$('.leftside').height();
$('.rightside').css('height',sliderHeight);
})
</script>