Question

我有一个两侧分开的容器。在左侧有一个滑块，在右侧有一个输入的html表单。我的问题是我无法使html表单与所有电脑显示器上的滑块高度相同（高度通常比滑块短。能不能帮我实现这个目标？

Answer 1

在包含侧边栏和表单的容器div上使用flex。

＆＃13;

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%;
}

＆＃13;

<div class="con">
  <div class="side">
    this is the sidebar
  </div>
  <form>
    form contains the input
    <input type="text">
  </form>
</div>

＆＃13;

Answer 2

我为你制作代码。请查看以下链接：

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>

如何使html表单适合填充容器

2 个答案: