Html 框设置为高度：自动不工作_Html_Css_Resize_Height

Html 框设置为高度：自动不工作

html css

Html 框设置为高度：自动不工作,html,css,resize,height,Html,Css,Resize,Height,我需要这些长方体div根据每个内容的长度来扩展其高度。高度：根据我在这里读到的内容，auto似乎是一个解决方案，但由于某种原因，该属性当前没有考虑每个框中的文本div。文本div会随着浏览器窗口的缩小而很好地延长，但对祖先容器没有影响 HTML 您需要删除位置：绝对来自.text 用位置定位元素：绝对会将该元素从DOM元素流中移除，当它增长时，它的祖先不会增长您需要删除位置：绝对来自.text 用位置定位元素：绝对会将该元素从DOM元素流中删除，并且当它增长时，它的祖先不会增长 <!DOC

我需要这些长方体div根据每个内容的长度来扩展其高度。高度：根据我在这里读到的内容，auto似乎是一个解决方案，但由于某种原因，该属性当前没有考虑每个框中的文本div。文本div会随着浏览器窗口的缩小而很好地延长，但对祖先容器没有影响

HTML

您需要删除

位置：绝对来自.text

用位置定位元素：绝对
会将该元素从DOM元素流中移除，当它增长时，它的祖先不会增长
您需要删除位置：绝对来自.text

用位置定位元素：绝对
会将该元素从DOM元素流中删除，并且当它增长时，它的祖先不会增长
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
</head>
<body>
    <div id = "container">
        <div id="box1" class = "box"><div id="text1" class="text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies ac est eu egestas. Etiam egestas elit blandit, mollis magna sit amet, consectetur augue. Aliquam quis elit ac ipsum maximus vestibulum vitae ac purus. Pellentesque vestibulum ante diam, vitae convallis urna tristique eu. Suspendisse potenti. Pellentesque pellentesque enim turpis. Integer efficitur lacinia felis eu sodales. Curabitur vestibulum faucibus sagittis. Aenean ut orci sem. Sed vel nisi pulvinar odio ullamcorper fermentum. Duis diam neque, volutpat id efficitur nec, commodo sit amet enim. Nam porta est eu turpis aliquet cursus. Vivamus tempor nisi sed odio rhoncus viverra. Morbi fermentum vitae risus ut porta. Cras scelerisque diam nisi, sed interdum lorem ullamcorper nec. Pellentesque auctor justo non tortor cursus, faucibus consequat ipsum mollis. Cras dui magna, volutpat sed nibh a, fringilla condimentum felis. Quisque facilisis, enim et feugiat eleifend, mauris nisi pulvinar massa, et sodales risus sem et mauris. Sed lacus leo, faucibus eget imperdiet in, dapibus vitae enim.</div>
                <div id="video1" class="video"> <video loop muted><source src=assets/IMG_1353.MOV></video></div>
        </div>
        <div id = "box2" class="box">
                <div id="text2" class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies ac est eu egestas. Etiam egestas elit blandit, mollis magna sit amet, consectetur augue. Aliquam quis elit ac ipsum maximus vestibulum vitae ac purus. Pellentesque vestibulum ante diam, vitae convallis urna tristique eu. Suspendisse potenti. Pellentesque pellentesque enim turpis. Integer efficitur lacinia felis eu sodales. Curabitur vestibulum faucibus sagittis. Aenean ut orci sem. Sed vel nisi pulvinar odio ullamcorper fermentum. Duis diam neque, volutpat id efficitur nec, commodo sit amet enim. Nam porta est eu turpis aliquet cursus. Vivamus tempor nisi sed odio rhoncus viverra. Morbi fermentum vitae risus ut porta. Cras scelerisque diam nisi, sed interdum lorem ullamcorper nec. Pellentesque auctor justo non tortor cursus, faucibus consequat ipsum mollis. Cras dui magna, volutpat sed nibh a, fringilla condimentum felis. Quisque facilisis, enim et feugiat eleifend, mauris nisi pulvinar massa, et sodales risus sem et mauris. Sed lacus leo, faucibus eget imperdiet in, dapibus vitae enim.</div>
                <div id="video2" class="video" > <video loop muted><source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"/></video></div>
        </div>
        <div id = "box3" class="box">
            <div id="text3" class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies ac est eu egestas. Etiam egestas elit blandit, mollis magna sit amet, consectetur augue. Aliquam quis elit ac ipsum maximus vestibulum vitae ac purus. Pellentesque vestibulum ante diam, vitae convallis urna tristique eu. Suspendisse potenti. Pellentesque pellentesque enim turpis. Integer efficitur lacinia felis eu sodales. Curabitur vestibulum faucibus sagittis. Aenean ut orci sem. Sed vel nisi pulvinar odio ullamcorper fermentum. Duis diam neque, volutpat id efficitur nec, commodo sit amet enim. Nam porta est eu turpis aliquet cursus. Vivamus tempor nisi sed odio rhoncus viverra. Morbi fermentum vitae risus ut porta. Cras scelerisque diam nisi, sed interdum lorem ullamcorper nec. Pellentesque auctor justo non tortor cursus, faucibus consequat ipsum mollis. Cras dui magna, volutpat sed nibh a, fringilla condimentum felis. Quisque facilisis, enim et feugiat eleifend, mauris nisi pulvinar massa, et sodales risus sem et mauris. Sed lacus leo, faucibus eget imperdiet in, dapibus vitae enim.</div>
        <div id="video2" class="video" > <video loop muted><source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"/></video></div>
        </div>
    </div>
</body>
<script>
$(document).ready(function(){
    $(".box").children(".video").click(function () {
        $(this).siblings(".text").toggleClass("toggle");
        $(this).toggleClass("toggle");
    });
    $(".box").children(".text").click(function() {
        $(this).siblings(".video").toggleClass("toggle");
        $(this).toggleClass("toggle");
    });
});
</script>
<script>
$(document).ready(function () {
    $(".video").hover(function () {
        $(this).children("video")[0].play();
    }, function () {
        var el = $(this).children("video")[0];
        el.pause();
    });
});
</script>
</html>

#container {
    position: relative;
    margin: 10%;
}

.box {
    position: relative;
    display: inline-block
}

#box1 {
    border: solid 1px;
    position: relative;
    width: 100%;
    height: auto;
    padding: 5%;
}

#box2 {
    border: solid 1px;
    position: relative;
    width: 100%;
    height: auto; 
    padding: 5%;
}

#box3 {
    border: solid 1px;
    position: relative;
    width: 100%;
    height: auto;
    padding: 5%;
}
.text {
    display: block;
    position: absolute;
    font: .9em courier;
    line-height: 160%;
    padding: 20px;
    border: 1px dashed black;
    color: rgba(0,0,0, .2)
}

.video {
    display: block;
    padding: 3px;
    border: 1px solid blue;
}

video {
    display: block;
    height: auto;
    width: 100%;
}

.toggle.video {
    border: 1px dashed;
}

.toggle > video {
    opacity: .05;
}

.toggle.text {
    border: 1px solid blue;
    color: rgba(0,0,0, 1)
}