如何解决Flex:100%高度的包装器div不起作用
我有两个四个元素:html
,body
,root-wrapper
(蓝色边框)和wrapper
(红色边框)。红色包装纸必须位于蓝色根包装纸的内部,但是,当页面上有很多文本时,红色的内部包装纸会超出蓝色的包装纸,例如:
它应该是展开的蓝色。
JSFiddle:https://jsfiddle.net/ase71y34/
我尝试在height: 100%
上设置flex: 1 1 auto
和root-wrapper
,但没有用。
html :
...
<body>
<div class="root-wrapper">
<div class="wrapper">
<div class="input-wrapper">
<p>
lots of text
</p>
</div>
</div>
</div>
</body>
</html>
css :
:root {
--background-darkest: #262626;
--background-medium: #404040;
--background-lightest: #4d4d4d;
--font-lightest: #bfbfbf;
}
body {
color: var(--font-lightest);
}
.root-wrapper,html,body {
height: 100%;
margin: 0;
}
body {
display: flex;
}
.root-wrapper {
background-color: var(--background-darkest);
border: 3px solid blue;
display: flex;
flex: 1 1 auto;
align-items: stretch;
flex-direction: column;
}
.wrapper {
height: 100%;
display: flex;
justify-content: center;
justify-items: center;
align-items: center;
margin: 20px;
background-color: var(--background-darkest);
border: 3px solid red;
}
.input-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
解决方法
在body元素上使用min-height:100%
并同样考虑body的列方向
:root {
--background-darkest: #262626;
--background-medium: #404040;
--background-lightest: #4d4d4d;
--font-lightest: #bfbfbf;
}
body {
color: var(--font-lightest);
min-height: 100%;
display: flex;
flex-direction: column;
margin: 0;
}
.root-wrapper,html {
height: 100%;
margin: 0;
}
.root-wrapper {
background-color: var(--background-darkest);
border: 3px solid blue;
display: flex;
flex: 1 1 auto;
align-items: stretch;
flex-direction: column;
}
.wrapper {
height: 100%;
display: flex;
justify-content: center;
justify-items: center;
align-items: center;
margin: 20px;
background-color: var(--background-darkest);
border: 3px solid red;
}
.input-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
<div class="root-wrapper">
<div class="wrapper">
<div class="input-wrapper">
<p>
Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet,consectetur adipiscing
elit,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident,quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt
mollit anim id est laborum. Lorem ipsum dolor sit amet,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum
dolor sit amet,sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet,sunt in culpa qui officia deserunt
mollit anim id est laborum.Lorem ipsum dolor sit amet,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor
sit amet,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident,quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa
qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet,quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
</div>
</div>
</div>
,
从height:100%;
中删除.root-wrapper,html,body
。
它会在可见屏幕的100%处停止,并且不会再继续。也可以使其min-height 100%;
继续前进。
你说
我尝试在root-wrapper上设置height:100%和flex:1 1 auto,但是没有用。
因为input-wrapper的高度是100%。因此,您需要为透视图输入包装机的高度设置auto
根包装机的高度。我认为也不需要正文display flex
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。