我有以下 html 结构:
<div class="page"><div class="page_left"></div><div class="page_right"><div class="内容"><div class="content_left"><p>内容在这里</p><div class="content_right"></div>
除了 Safari 浏览器之外，一切都很好.如果里面的文本大于 100vh，则 content 不会占据 的完整高度.即使它被设置为 flex:1 它只需要 100vh 高度.但是根据 CSS 规则 flex:1 需要容器的完整高度.content 的容器是 page_right ，它完成内容的完整高度.不知道这里有什么问题.
/* 前缀为 https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */* {-webkit-box-sizing: 边框框；box-sizing: 边框框；}html {高度:100%；宽度:100%；-webkit-box-sizing: 边框框；box-sizing: 边框框；font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}身体 {边距:0；填充:0；高度:100%；宽度:100%；}.根 {高度:100%；宽度:100%；}.页 {高度:100%；宽度:100%；显示:-webkit-box；显示:-ms-flexbox;显示:弹性；}.page .page_left {最小宽度:100px；背景:黑色；高度:100%；}.page .page_right {-webkit-box-flex: 1;-ms-flex: 1;弹性:1；显示:-webkit-box；显示:-ms-flexbox;显示:弹性；-webkit-box-orient:垂直；-webkit-box-direction:正常；-ms-flex-direction: 列；弹性方向:列；溢出:滚动；}.page_right .content {-webkit-box-flex: 1;-ms-flex: 1;弹性:1；宽度:100%；显示:-webkit-box；显示:-ms-flexbox;显示:弹性；}.page_right .content .content_left {-webkit-box-flex: 1;-ms-flex: 1;弹性:1；显示:-webkit-box；显示:-ms-flexbox;显示:弹性；背景:黄色；}.page_right .content .content_right {最小宽度:200px；背景:橙色；}<div class="page"><div class="page_left"></div><div class="page_right"><div class="内容"><div class="content_left"><p>Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时一位不知名的印刷商使用了一个类型的厨房，并争先恐后地将其制作成一本类型样本书.<br/><br/><br/>它不仅存活了五个世纪，而且还经历了电子排版的飞跃，基本保持不变.<br/><br/><br/>它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行，最近随着桌面出版软件 Aldus PageMaker 包括 Lorem Ipsum 的版本而流行.<br/><br/><br/>我们为什么用它?一个长期存在的事实是，读者在查看页面布局时会被页面的可读内容分心.<br/><br/><br/><br/>使用 Lorem Ipsum 的要点在于它具有或多或少的正态分布字母，而不是使用此处的内容，此处的内容"，使其看起来像可读的英语.<br/><br/><br/>许多桌面出版软件包和网页编辑器现在使用 Lorem Ipsum 作为它们的默认模型文本，搜索lorem ipsum"将发现许多仍处于起步阶段的网站.<br/><br/><br/>多年来，各种版本已经演变，有时是偶然的，有时是故意的(注入幽默等).<br/><br/><br/>Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时一位不知名的打印机使用了一个类型的厨房并争先恐后地制作<br/><br/><br/>它不仅存活了五个世纪，而且还经历了电子排版的飞跃，基本保持不变.<br/><br/><br/>它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行，最近随着桌面出版软件 Aldus PageMaker 包括 Lorem Ipsum 的版本而流行.<br/><br/><br/>我们为什么用它?一个长期存在的事实是，读者在查看页面布局时会被页面的可读内容分散注意力.<br/><br/><br/><br/>使用 Lorem Ipsum 的要点在于它具有或多或少的正态分布字母，而不是使用此处的内容，此处的内容"，使其看起来像可读的英语.<br/><br/><br/>许多桌面出版软件包和网页编辑器现在使用 Lorem Ipsum 作为它们的默认模型文本，搜索lorem ipsum"将发现许多仍处于起步阶段的网站.<br/><br/><br/>多年来，各种版本已经演变，有时是偶然的，有时是故意的(注入幽默等).<br/><br/><br/>Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时一位不知名的打印机使用了一个类型的厨房并争先恐后地制作<br/><br/><br/>它不仅存活了五个世纪，而且还经历了电子排版的飞跃，基本保持不变.<br/><br/><br/>它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行，最近随着桌面出版软件 Aldus PageMaker 包括 Lorem Ipsum 的版本而流行.<br/><br/><br/>我们为什么用它?一个长期存在的事实是，读者在查看页面布局时会被页面的可读内容分心.<br/><br/><br/><br/>使用 Lorem Ipsum 的要点在于它具有或多或少的正态分布字母，而不是使用此处的内容，此处的内容"，使其看起来像可读的英语.<br/><br/><br/>许多桌面出版软件包和网页编辑器现在使用 Lorem Ipsum 作为它们的默认模型文本，搜索lorem ipsum"将发现许多仍处于起步阶段的网站.<br/><br/><br/>多年来，各种版本已经演变，有时是偶然的，有时是故意的(注入幽默等).</p><div class="content_right"></div>
不是:这是我真实应用程序的结构，所以我可能无法更改 HTML.
Codepen:https://codepen.io/puspender/pen/gOpqXGW?editors=1100
请试试这个.如果有帮助，请告诉我.
.page_right 只需要自动溢出，因为在它里面你只有一个元素 .content
.page .page_right {/* -webkit-box-flex: 1;-ms-flex: 1;弹性:1；显示:-webkit-box；显示:-ms-flexbox;显示:弹性；-webkit-box-orient:垂直；-webkit-box-direction:正常；-ms-flex-direction: 列；弹性方向:列；*/溢出:自动；}.content 我添加了 min-height: 100%; 以在我们没有足够的内容时为整个页面的内容设置高度.我还删除了 width: 100% 因为默认情况下内容将占用整个空间
.page_right .content {/* -webkit-box-flex: 1;-ms-flex: 1;弹性:1；宽度:100%；显示:-webkit-box；显示:-ms-flexbox;*/显示:弹性；最小高度:100%；}.content_left 这是可选的，但我认为在这个 div 中的内容可能会在没有 flex 的情况下以默认流程流动.
.page_right .content .content_left {/* -webkit-box-flex: 1;-ms-flex: 1;弹性:1；显示:-webkit-box；显示:-ms-flexbox;显示:弹性；*/背景:黄色；}* {box-sizing: 边框框；}html,身体 {边距:0；填充:0；高度:100%；宽度:100%；font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}.根 {高度:100%；宽度:100%；}.页 {高度:100%；宽度:100%；显示:弹性；}.page .page_left {最小宽度:100px；背景:黑色；高度:100%；}.page .page_right {溢出-y:自动；}.page_right .content {显示:弹性；最小高度:100%；}.page_right .content .content_left {背景:黄色；}.page_right .content .content_right {最小宽度:200px；背景:橙色；}<div class="page"><div class="page_left"></div><div class="page_right"><div class="内容"><div class="content_left"><p>Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时一位不知名的印刷商使用了一个类型的厨房，并争先恐后地将其制作成一本类型样本书.<br/><br/><br/>它不仅存活了五个世纪，而且还经历了电子排版的飞跃，基本保持不变.</p><p>Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时一位不知名的印刷商使用了一个类型的厨房，并争先恐后地将其制作成一本类型样本书.<br/><br/><br/>它不仅存活了五个世纪，而且还经历了电子排版的飞跃，基本保持不变.</p><p>Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时一位不知名的印刷商使用了一个类型的厨房，并争先恐后地将其制作成一本类型样本书.<br/><br/><br/>它不仅存活了五个世纪，而且还经历了电子排版的飞跃，基本保持不变.</p><p>Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时一位不知名的印刷商使用了一个类型的厨房，并争先恐后地将其制作成一本类型样本书.<br/><br/><br/>它不仅存活了五个世纪，而且还经历了电子排版的飞跃，基本保持不变.</p><p>Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时一位不知名的印刷商使用了一个类型的厨房，并争先恐后地将其制作成一本类型样本书.<br/><br/><br/>它不仅存活了五个世纪，而且还经历了电子排版的飞跃，基本保持不变.</p><div class="content_right"></div>
I am having the below structure of html:
<div class="root">
<div class="page">
<div class="page_left"></div>
<div class="page_right">
<div class="content">
<div class="content_left">
<p>
content here
</p>
</div>
<div class="content_right"></div>
</div>
</div>
</div>
</div>
Everything is fine except on Safari browser. The content is not taking the complete height of the <p> if the text inside is greater than 100vh. Even though it has been set to flex:1 it only takes 100vh height. But as per the CSS rules flex:1 takes the complete height of the container. The container of content is page_right and it does the complete height of the content. Don't know what the issue here.
/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
height: 100%;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.root {
height: 100%;
width: 100%;
}
.page {
height: 100%;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.page .page_left {
min-width: 100px;
background: black;
height: 100%;
}
.page .page_right {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow: scroll;
}
.page_right .content {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.page_right .content .content_left {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background: yellow;
}
.page_right .content .content_right {
min-width: 200px;
background: orange;
}
<div class="root">
<div class="page">
<div class="page_left"></div>
<div class="page_right">
<div class="content">
<div class="content_left">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br
/><br /><br /> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
<br /><br /><br /> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br /><br /><br
/> Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.<br /><br /><br /><br /> The point of using Lorem Ipsum is that it has a more-or-less normal distribution
of letters, as opposed to using 'Content here, content here', making it look like readable English.
<br /><br /><br /> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
<br /><br /><br /> Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
<br /><br /><br /> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book.<br /><br /><br /> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
<br /><br /><br /> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br /><br /><br
/> Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.<br /><br /><br /><br /> The point of using Lorem Ipsum is that it has a more-or-less normal distribution
of letters, as opposed to using 'Content here, content here', making it look like readable English.
<br /><br /><br /> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
<br /><br /><br /> Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
<br /><br /><br /> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book.<br /><br /><br /> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
<br /><br /><br /> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br /><br /><br
/> Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.<br /><br /><br /><br /> The point of using Lorem Ipsum is that it has a more-or-less normal distribution
of letters, as opposed to using 'Content here, content here', making it look like readable English.
<br /><br /><br /> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
<br /><br /><br /> Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
</div>
<div class="content_right"></div>
</div>
</div>
</div>
</div>
Not: This is the structure of my real application, so probably I can't change the HTML.
Codepen: https://codepen.io/puspender/pen/gOpqXGW?editors=1100
Please try this. And let me know if it helped.
.page_right only needs overflow auto, because inside of it you have only one element which is .content
.page .page_right {
/* -webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; */
overflow: auto;
}
.content I've added min-height: 100%; to set height for content of the whole page when we've not enough content. I've also removed width: 100% because by default content will take the whole space left
.page_right .content {
/* -webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
display: -webkit-box;
display: -ms-flexbox; */
display: flex;
min-height: 100%;
}
.content_left this is optional, but I think in this div content may flow in default flow without flex.
.page_right .content .content_left {
/* -webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex; */
background: yellow;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.root {
height: 100%;
width: 100%;
}
.page {
height: 100%;
width: 100%;
display: flex;
}
.page .page_left {
min-width: 100px;
background: black;
height: 100%;
}
.page .page_right {
overflow-y: auto;
}
.page_right .content {
display: flex;
min-height: 100%;
}
.page_right .content .content_left {
background: yellow;
}
.page_right .content .content_right {
min-width: 200px;
background: orange;
}
<div class="root">
<div class="page">
<div class="page_left"></div>
<div class="page_right">
<div class="content">
<div class="content_left">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br
/><br /><br /> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br
/><br /><br /> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br
/><br /><br /> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br
/><br /><br /> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br
/><br /><br /> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
<div class="content_right"></div>
</div>
</div>
</div>
</div>
这篇关于flex:1 在 safari 浏览器上只采用 100vh 的高度而不是完整的内容高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
