具有可滚动内容窗口的CSS / HTML响应式固定侧边栏导航
[英]CSS/HTML Responsive Fixed Sidebar Nav with Scrollable content window
问题描述
我的编码非常基础，并且正在研究具有可见功能的概念验证设计。 为此，我希望在窗口左侧创建一个固定的，响应的CSS下拉菜单，并且主体为可滚动内容。
抱歉，该如何补救。 我已经在这部分代码上闲逛了将近两个星期，所以我不确定我的所有编辑是否都已适当删除/等。
我的猜测是，这与我使用的CSS特定性有关，但我无法一生都知道问题所在-目前，我的显示器未在右侧显示配置文件图像屏幕，但与固定的侧边栏重叠。
除非有人也可以提供帮助，否则可以忽略“ col-X”类。 尝试使用col间隔方法，但是我使用附加类对CSS的特殊性还有其他问题，因此尝试使用我已经指定要简化的ID和Class元素。
* { box-sizing: border-box; font-family: "Istok Web", "Barlow Semi Condensed", Arial, Helvetica, sans-serif; } /*12 col style for responsive page #col-1 { width: 8.33%; } #col-2 { width: 16.66%; } #col-3 { width: 25%; } #col-4 { width: 33.33%; } #col-5 { width: 41.66%; } #col-6 { width: 50%; } #col-7 { width: 58.33%; } #col-8 { width: 66.66%; } #col-9 { width: 75%; } #col-10 { width: 83.33%; } #col-11 { width: 91.66%; } #col-12 { width: 100%; } [id*="col-"] { float: left; } */ /* Fixed sidenav, full height */ #sidenav { width: 25%; height: 100%; position: fixed; z-index: 1; left: 0; overflow-x: hidden; padding-top: 17%; } /*Strip the ul of padding and list styling*/ ul { list-style-type: none; margin: 0; padding: 2%; } /*Create a horizontal list with spacing*/ li { display: block; margin-right: 1px; } /*Style for menu links*/ li a { display: block; height: 50px; text-align: center; line-height: 50px; color: #fc9497; text-decoration: none; } /*Style for dropdown links*/ li:hover ul a { color: #85e2ff; height: 40px; line-height: 40px; } /*Hover state for dropdown links*/ li:hover ul a:hover { color: #00BDF8; } /*Hide dropdown links until they are needed*/ li ul { display: none; } /*Make dropdown links vertical*/ li ul li { display: block; float: none; } /*Prevent text wrapping*/ li ul li a { width: auto; min-width: 100px; padding: 0 20px; } /*Display the dropdown on hover*/ ul li a:hover+.hidden, .hidden:hover { display: block; } /*Style 'show menu' label button and hide it by default*/ .show-menu { text-decoration: none; color: #85e2ff; text-align: center; padding: 10px 0; display: none; float: left; } /*Hide checkbox*/ input[type=checkbox] { display: none; } /*Show menu when invisible checkbox is checked*/ input[type=checkbox]:checked~#menu { display: block; } /*Responsive Styles*/ @media screen and (max-width: 760px) { /*Make dropdown links appear inline*/ ul { position: fixed; top: 0; width: 100%; display: none; padding-top: 20px; float: left; } /*Remove col-3 width for total page width #col-3 { width: 100%; } */ /*Create vertical spacing*/ li { margin-bottom: 1px; } /*Make all menu links full width*/ ul li, li a { width: 100%; } /*Display 'show menu' link*/ .show-menu { display: block; } } #main { height: 100%; padding-top: 1%; position: relative; width: 75%; } #imagehead { height: 45%; width: 100%; } .imagemask { display: block; max-width: 280px; right: 0; height: 180px; padding: 5px; overflow: hidden; } img { margin-left: auto; margin-right: auto; } .element { border: 2% #85e2ff; border-radius: 2%; }
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/patientprofile.css"> <meta name="theme-color" content="#ffffff"> <link href='https://fonts.googleapis.com/css?family=Barlow Semi Condensed' rel='stylesheet'> </head> <body> <div id="sidenav"> <label for="show-menu" class="show-menu">Show My Information</label> <input type="checkbox" id="show-menu" role="button"> <ul id="menu"> <li><a href=#>My Health</a> <ul class="hidden"> <li><a href=#>My Appointments</a> <ul class="hidden"> <li><a href=#>##/##/##</a></li> <li><a href=#>##/##/##</a></li> <li><a href=#>##/##/##</a></li> </ul> </li> <li><a href=#>My Results</a> <ul class="hidden"> <li><a href=#>##/##/##</a></li> <li><a href=#>##/##/##</a></li> <li><a href=#>##/##/##</a></li> </ul> </li> <li><a href=#>My Scans</a> <ul class="hidden"> <li><a href=#>##/##/##</a></li> <li><a href=#>##/##/##</a></li> <li><a href=#>##/##/##</a></li> </ul> </li> </ul> </li> <li><a href=#>My Providers</a> <ul class="hidden"> <li><a href=#>Dr. Dolittle</a></li> <li><a href=#>Ms. Shelly Sheldon</a></li> <li><a href=#>Mr. Titus Anromidon</a></li> </ul> </li> </ul> </div> <div id="main"> <div id="imagehead"> <img class="imagemask" src="images/profile.jpg"> </div> </div> </body> </html>
2 个解决方案
解决方案1
0 2018-06-26 13:22:06
在下面更新了您的代码。 希望这对你有用:)
* { box-sizing: border-box; font-family: "Istok Web", "Barlow Semi Condensed", Arial, Helvetica, sans-serif; } /*12 col style for responsive page #col-1 { width: 8.33%; } #col-2 { width: 16.66%; } #col-3 { width: 25%; } #col-4 { width: 33.33%; } #col-5 { width: 41.66%; } #col-6 { width: 50%; } #col-7 { width: 58.33%; } #col-8 { width: 66.66%; } #col-9 { width: 75%; } #col-10 { width: 83.33%; } #col-11 { width: 91.66%; } #col-12 { width: 100%; } [id*="col-"] { float: left; } */ /* Fixed sidenav, full height */ #sidenav { width: 25%; height: 100%; position: fixed; z-index: 1; left: 0; overflow-x: hidden; padding-top: 10%; background: #fff; } /*Strip the ul of padding and list styling*/ ul { list-style-type: none; margin: 0; padding: 2%; } /*Create a horizontal list with spacing*/ li { display: block; margin-right: 1px; } /*Style for menu links*/ li a { display: block; height: 50px; text-align: center; line-height: 50px; color: #fc9497; text-decoration: none; } /*Style for dropdown links*/ li:hover ul a { color: #85e2ff; height: 40px; line-height: 40px; } /*Hover state for dropdown links*/ li:hover ul a:hover { color: #00BDF8; } /*Hide dropdown links until they are needed*/ li ul { display: none; } /*Make dropdown links vertical*/ li ul li { display: block; float: none; } /*Prevent text wrapping*/ li ul li a { width: auto; min-width: 100px; padding: 0 20px; } /*Display the dropdown on hover*/ ul li a:hover+.hidden, .hidden:hover { display: block; } /*Style 'show menu' label button and hide it by default*/ .show-menu { text-decoration: none; color: #85e2ff; text-align: center; padding: 10px 0; display: none; float: left; } /*Hide checkbox*/ input[type=checkbox] { display: none; } /*Show menu when invisible checkbox is checked*/ input[type=checkbox]:checked~#menu { display: block; } /*Responsive Styles*/ @media screen and (max-width: 760px) { /*Make dropdown links appear inline*/ ul { position: fixed; top: 0; width: 100%; display: none; padding-top: 20px; float: left; } /*Remove col-3 width for total page width #col-3 { width: 100%; } */ /*Create vertical spacing*/ li { margin-bottom: 1px; } /*Make all menu links full width*/ ul li, li a { width: 100%; } /*Display 'show menu' link*/ .show-menu { display: block; } } #main { height: 100%; padding-top: 1%; position: relative; width: 75%; float: right; } #imagehead { height: 45%; width: 100%; } .imagemask { display: block; max-width: 280px; right: 0; height: 180px; padding: 5px; overflow: hidden; } img { margin-left: auto; margin-right: auto; } .element { border: 2% #85e2ff; border-radius: 2%; }
<div id="sidenav"> <label for="show-menu" class="show-menu">Show My Information</label> <input type="checkbox" id="show-menu" role="button"> <ul id="menu"> <li><a href=#>My Health</a> <ul class="hidden"> <li><a href=#>My Appointments</a> <ul class="hidden"> <li><a href=#>##/##/##</a></li> <li><a href=#>##/##/##</a></li> <li><a href=#>##/##/##</a></li> </ul> </li> <li><a href=#>My Results</a> <ul class="hidden"> <li><a href=#>##/##/##</a></li> <li><a href=#>##/##/##</a></li> <li><a href=#>##/##/##</a></li> </ul> </li> <li><a href=#>My Scans</a> <ul class="hidden"> <li><a href=#>##/##/##</a></li> <li><a href=#>##/##/##</a></li> <li><a href=#>##/##/##</a></li> </ul> </li> </ul> </li> <li><a href=#>My Providers</a> <ul class="hidden"> <li><a href=#>Dr. Dolittle</a></li> <li><a href=#>Ms. Shelly Sheldon</a></li> <li><a href=#>Mr. Titus Anromidon</a></li> </ul> </li> </ul> </div> <div id="main"> <div id="imagehead"> 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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 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.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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 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.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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 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. </div> </div>
解决方案2
0 已采纳 2018-06-26 13:29:38
希望这会有所帮助，并希望我的假设对您要达到的目标是正确的。
* { box-sizing: border-box; font-family: "Istok Web", "Barlow Semi Condensed", Arial, Helvetica, sans-serif; padding: 0; margin: 0; } /*12 col style for responsive page #col-1 { width: 8.33%; } #col-2 { width: 16.66%; } #col-3 { width: 25%; } #col-4 { width: 33.33%; } #col-5 { width: 41.66%; } #col-6 { width: 50%; } #col-7 { width: 58.33%; } #col-8 { width: 66.66%; } #col-9 { width: 75%; } #col-10 { width: 83.33%; } #col-11 { width: 91.66%; } #col-12 { width: 100%; } [id*="col-"] { float: left; } */ /* Fixed sidenav, full height */ #sidenav { width: 25%; height: 100%; position: fixed; z-index: 1; left: 0; overflow-x: hidden; padding-top: 17%; } /*Strip the ul of padding and list styling*/ ul { list-style-type: none; margin: 0; padding: 2%; } /*Create a horizontal list with spacing*/ li { display: block; margin-right: 1px; } /*Style for menu links*/ li a { display: block; height: 50px; text-align: center; line-height: 50px; color: #fc9497; text-decoration: none; } /*Style for dropdown links*/ li:hover ul a { color: #85e2ff; height: 40px; line-height: 40px; } /*Hover state for dropdown links*/ li:hover ul a:hover { color: #00BDF8; } /*Hide dropdown links until they are needed*/ li ul { display: none; } /*Make dropdown links vertical*/ li ul li { display: block; float: none; } /*Prevent text wrapping*/ li ul li a { width: auto; min-width: 100px; padding: 0 20px; } /*Display the dropdown on hover*/ ul li a:hover+.hidden, .hidden:hover { display: block; } /*Style 'show menu' label button and hide it by default*/ .show-menu { text-decoration: none; color: #85e2ff; text-align: center; display: none; } /*Hide checkbox*/ input[type=checkbox] { display: none; } /*Show menu when invisible checkbox is checked*/ input[type=checkbox]:checked~#menu { display: block !important; } #main { height: 150vh; /** just to make it scrollable. can be removed */ min-height: 100vh; padding-top: 1%; position: relative; width: 100%; padding: 16px 16px 16px calc(25% + 16px); } #imagehead { height: 45%; width: 100%; } .imagemask { display: block; max-width: 280px; right: 0; height: 180px; padding: 5px; overflow: hidden; } img { margin-left: auto; margin-right: auto; } .element { border: 2% #85e2ff; border-radius: 2%; } /*Responsive Styles*/ @media screen and (max-width: 760px) { #sidenav { width:100%; left:0; top: 0; right: 0; height: auto; min-height: 60px; padding-top: 16px; background-color: #fff; } #main { padding-left: 16px; padding-top: 60px; } /*Make dropdown links appear inline*/ ul#menu { display:none; } /*Remove col-3 width for total page width #col-3 { width: 100%; } */ /*Create vertical spacing*/ li { margin-bottom: 1px; } /*Make all menu links full width*/ ul li, li a { width: 100%; } /*Display 'show menu' link*/ .show-menu { display: block; } }
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/patientprofile.css"> <meta name="theme-color" content="#ffffff"> <link href='https://fonts.googleapis.com/css?family=Barlow Semi Condensed' rel='stylesheet'> </head> <body> <div id="sidenav"> <label for="show-menu" class="show-menu">Show My Information</label> <input type="checkbox" id="show-menu" role="button"> <ul id="menu"> <li><a href=#>My Health</a> <ul class="hidden"> <li><a href=#>My Appointments</a> <ul class="hidden"> <li><a href=#>##/##/##</a></li> <li><a href=#>##/##/##</a></li> <li><a href=#>##/##/##</a></li> </ul> </li> <li><a href=#>My Results</a> <ul class="hidden"> <li><a href=#>##/##/##</a></li> <li><a href=#>##/##/##</a></li> <li><a href=#>##/##/##</a></li> </ul> </li> <li><a href=#>My Scans</a> <ul class="hidden"> <li><a href=#>##/##/##</a></li> <li><a href=#>##/##/##</a></li> <li><a href=#>##/##/##</a></li> </ul> </li> </ul> </li> <li><a href=#>My Providers</a> <ul class="hidden"> <li><a href=#>Dr. Dolittle</a></li> <li><a href=#>Ms. Shelly Sheldon</a></li> <li><a href=#>Mr. Titus Anromidon</a></li> </ul> </li> </ul> </div> <div id="main"> <div id="imagehead"> <h1>Profile</h1> <hr> <p> Lorem ipsum dolor sit amet, pri ea melius eligendi quaestio. Eam ludus commune no, eu est percipit philosophia, ne has quando ullamcorper. Mel euismod persequeris eu, eam in duis iusto concludaturque, postea efficiendi qui at. Nam te noster option efficiendi. Dicam apeirian scribentur ad pri. </p> <p> Lorem ipsum dolor sit amet, pri ea melius eligendi quaestio. Eam ludus commune no, eu est percipit philosophia, ne has quando ullamcorper. Mel euismod persequeris eu, eam in duis iusto concludaturque, postea efficiendi qui at. Nam te noster option efficiendi. Dicam apeirian scribentur ad pri. </p> <p> Lorem ipsum dolor sit amet, pri ea melius eligendi quaestio. Eam ludus commune no, eu est percipit philosophia, ne has quando ullamcorper. Mel euismod persequeris eu, eam in duis iusto concludaturque, postea efficiendi qui at. Nam te noster option efficiendi. Dicam apeirian scribentur ad pri. </p> <p> Lorem ipsum dolor sit amet, pri ea melius eligendi quaestio. Eam ludus commune no, eu est percipit philosophia, ne has quando ullamcorper. Mel euismod persequeris eu, eam in duis iusto concludaturque, postea efficiendi qui at. Nam te noster option efficiendi. Dicam apeirian scribentur ad pri. </p> </div> </div> </body> </html>
如何实现具有固定侧边栏和可滚动内容的CSS布局？
[英]How can I realize a CSS layout with a fixed sidebar and scrollable content?
带有可滚动内容的标题和正文的CSS和DIV，以及右侧固定的侧边栏
[英]CSS and DIV with header and body with scrollable content, and fixed sidebar to right
在CSS中创建一个带有响应容器的固定宽度的边栏，用于旁边的内容
[英]Creating a fixed width sidebar with a responsive container for content next to it in CSS
带有页眉/页脚的HTML / CSS SIdebar和全高度的可滚动内容
[英]HTML/CSS SIdebar with header/footer and scrollable content at full height
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.