问题描述
我正在制作一个移动响应式页面,并且我是第一次使用 flexbox.
我遇到的问题是当内容 div 中有很多信息时,div 会延伸到页面宽度之外.
我曾尝试使用最大宽度样式,但这会削弱网站的响应能力.
JSFiddle
https://jsfiddle.net/z23rmo80/
CSS
body {显示:弹性;弹性方向:列;最小高度:100vh;文本对齐:居中;}正文 .header {宽度:100%;高度:182px;背景:白色;}身体.圣杯身体{弹性:1 0 自动;显示:弹性;宽度:1000px;边距右:自动;左边距:自动;}身体 .holygrail-body .content {弹性:1 0 自动;背景:浅绿色;溢出-y:自动;}身体 .holygrail 身体 .nav {宽度:240px;列表样式:无;文本对齐:左;顺序:-1;边距:0;}身体 .holygrail 身体 .aside {宽度:100px;背景:橙色;}正文 .footer {宽度:100%;高度:60px;}.sidenav {高度:100%;宽度:0;位置:固定;z-索引:1;顶部:0;左:0;背景色:#fff;溢出-x:隐藏;过渡:0.5s;填充顶部:60px;}.sidenav a {填充:8px 8px 8px 32px;文字装饰:无;字体大小:25px;颜色:#818181;显示:块;过渡:0.3s;}.sidenav a:悬停{颜色:#f1f1f1;}.sidenav .closebtn {位置:绝对;顶部:0;右:25px;字体大小:36px;左边距:50px;}.mobile-header{显示:无;}.hamburger{显示:无;}ul, ol {边距顶部:10px;}.nav li {列表样式:无外无;行高:36px;左边距:-15px;}.nav li a {颜色:#5f141f;文字装饰:无;文本阴影:2px 1px #f6eaec;字体大小:18px;左边距:-15px;}.sidenav li {列表样式:无外无;行高:36px;左边距:-15px;}.sidenav li a {颜色:#5f141f;文字装饰:无;文本阴影:2px 1px #f6eaec;字体大小:18px;左边距:-15px;}@media(最大宽度:700px){身体.圣杯身体{弹性方向:列;}身体 .holygrail-body .nav, 身体 .holygrail-body .aside {宽度:100%;}.sidenav {padding-top: 15px;}.sidenav {font-size: 18px;}.hamburger{display: inline;margin-left:-900px;}.nav{显示:无;}.mobile-header{显示:内联;}.header{显示:无;}}
HTML
<img src="header.jpg" style="max-width:1848px; margin-right:auto;margin-left:auto;"alt=""></标题><header class="mobile-header"><img src="header.jpg" style="width:100%;max-width:1848px; margin-right:auto;margin-left:auto;"alt=""></标题><div class="holygrail-body"><span class="hamburger" style="font-size:30px;cursor:pointer" onclick="openNav()">☰菜单<div id="mySidenav" class="sidenav"><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a><ul><li><a href="#">首页</a></li><li><a href="#">新项目</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li>