Question

我有一个问题，我想让#left与#right的高度相同，我设置高度：100％;但它只有在有内容的情况下才有效。

HTML＆amp; CSS代码：

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
    background-color: #cfcfcf;
    margin: 0;
}

#wrapper {
    width: 900px;
    height: 100%;
    background: white;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

#left
{
    width: 200px;
    min-height: 100%px;
    background: blue;
    overflow: hidden;
    height: 100%;
    float: left;
}
#leftbottom
{
    width: 200px;
    height: 30px;
    background: red;
    float: left;
}
#right
{
    width: 800px;
    background: cyan;
    height: 100%;
    float: right;
}
</style>
</head>
<body>
    <div id="wrapper">
        <div id="left">
            <h1>Lorem ipsum</h1>
            <h2>Lorem ipsum</h2>
            <div id="leftbottom"></div>
        </div>
        <div id="right">
            <h1>Content ipsum</h1>
            <h2>Lorem ipsum</h2>
            <h2>Lorem ipsum</h2>
            <h2><- White space</h2>
        </div>
    </div>
</body>
</html>

我还测试了位置：绝对但它也不起作用，我该如何解决？另外，我不需要建立固定的高度

Answer 1

如果您输入％，可以使用100大小的单词，而不是它的大小，如果要分配大小，请使用px

const sinon = require('sinon');
const rewire = require('rewire');

var myModule = rewire('./myModule');

describe('myModule', () => {
    it('should test myModule', () => {
        let fake = {
            save: () => {
                console.log('stub save')
                //return whatever you want 
            }
        }

        myModule.__set__('db', fake);
        //db.save in your module should now call the fake function
    });
})

Answer 2

＆＃13;

.slider figure img {
  width: 100%;
}

.slider figure {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin: 0;
  animation: 20s slider infinite;
}

＆＃13;

body {
    background-color: #cfcfcf;
    margin: 0;
}

#wrapper {
    width: 1000px;
    height: 300px;
    background: white;
}

#left
{
    width: 200px;
    background: blue;
    float: left;
    height: 100%;
}
#right
{
    width: 800px;
    background: cyan;
    height: 100%;
    float: right;
}

＆＃13;

Answer 3

解决方案并不大。您需要使用相同高度的bootstrap列。

<div class="row row-eq-height">
<div class="col-6">Hello</div>
<div class="col-6">World</div>
</div>

了解更多信息 https://docs.aws.amazon.com/AmazonS3/latest/dev/VirtualHosting.html

CSS自动高度不起作用

3 个答案: