css怎么实现左边高度随右边的高度变化_flex布局右侧高度以左侧高度为主_css_666的博客

link管理
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
方案二：table

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .left-box{
            width: 200px;
            background: olive;
            position: relative;
            padding: 0;
            margin: 0;
        .left-box p{
            padding: 0;
            margin: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);   
        .right-box{
            height: auto;
            width: 300px;
            background: red;
            word-break: break-all;
    </style>
</head>
    <table>
            <td class="left-box"><p>我是左侧</p></td>
            <td class="right-box">你好范德萨发生的是的但是发你好范德萨发生的是的但是发射点发射点发射点发射点发大水发射点发射点发射点范德萨范德萨射点发射点发射点发射点发大水发射点发射点发射点范德萨范德萨</td>
    </table>
</body>
</html>
                    方案一：flex布局&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;    &lt;meta htt...
一个元素的 padding，如果值是一个百分比，那这个百分比是相对于其父元素的宽度而言的，padding-bottom 也是如此。
使用 padding-bottom 来代替 height 来实现高度与宽度成比例的效果，将 padding-bottom设置为想要实现的 height 的值。同时将
其 height 设置为 0 以使元素的“高度”等于 padding-bottom 的值，从而实现需要的效果。
<div class=father>
    <div class=childbox></div>
<style type=
测试左边会随右边浮动而浮动，测试左边会随右边浮动而浮动
测试左边会随右边浮动而浮动测试左边会随右边浮动而浮动测试左边会随右边浮动而浮动测试左边会随右边浮动而浮动
测试左边会随右边浮动...
				在CSS中添加如下代码： 
复制代码代码如下: html,body{ overflow-y:scroll;} html,body{ overflow:scroll; min-height:101%;} html{ overflow:-moz-scrollbars-vertical;} 
已经试验过了，是可以执行的。由此可以得出结论：这类由高度导致页面抖动的问题，其实究其根本原因是滚动条是否显示导致的。
				1. flex布局
flex布局需要注意的是不要在设置display：flex的盒子上设置高度，否则里面的两个盒子会继承这个高度，当设置的宽度小于里面的盒子的宽度时，会压缩里面两个盒子的宽度。
 <div class="box">
    <div class="content clearfix">
      <div class="left-box"><span>我是左侧</span></div>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		/* 			===========================
				我们常见的添加阴影效果的方法，用多个div通过偏移来实现，但这需要很多 div，不够理想。随后，想到css的一个属性：border，在border相连接处可以产生对角线效果。这样用两个div就可以实现。
首先，我们看看border如何生成的对角线效果，在你的HTML的头部增加以下代码，你就会看到 这样的效果 。
.border{width:0;height:0;border-width:50p...
     <div class="nav_info">
       <div class="left_info">8888888888888888888888888888888888888888888888888888889
         99999999999999999999999999
				今天同学问了一个左边div的高度随着右边div的高度变化而变化的问题。开始想了想有点蒙。中间试着用height：100%；试过发现并不可行，因为高度百分比必须有确切的祖先元素（即设置了px）才可以。由于今天晚上正在团建，回来都12点多了。然后怎么也睡不着就做做这个吧，发现一坐下来安心的想问题，竟然迎刃而解了。
我用到的方法是1父元素设置position:relative;2左边的div设置pos...
				要让一个元素的高度随着窗口的高度自适应，可以使用CSS中的vh单位（视窗高度单位）。vh单位表示视窗的高度，1vh等于视窗高度的1%。
以下是一个使用vh单位实现自适应高度的示例代码：
```html
<div class="container">
  <p>这是一个自适应高度的元素</p>
```css
.container {
  height: 50vh; /* 限制元素的最大高度为视窗高度的50% */
  overflow: hidden; /* 隐藏元素超出部分 */
.container p {
  margin: 0;
  padding: 1rem;
  height: 100%; /* 设置元素高度为100% */
  box-sizing: border-box; /* 计算元素高度时包括内边距和边框 */
  background-color: #eee;
在上面的示例中，我们将`.container`元素的高度设置为50vh，这样它的高度将随着窗口高度的变化而自适应，同时使用`overflow: hidden`隐藏超出部分。然后将`.container p`元素的高度设置为100%，这样它就会填满`.container`元素，并且使用`box-sizing: border-box`将内边距和边框计算在元素的高度中。
你可以根据实际需求调整容器元素的高度和样式。