stackoom
  简体   繁体   中英

Fluid Content next to fixed sidebar with variable width

 原文  2017-11-15 18:38:32  7   1    html/ css/ twitter-bootstrap/ css-position/ sidebar

Question

I'm trying to implement a switchable sidebar (as in toggle between short and long form sidebar) using bootstrap, a bunch of examples and other works online.

The sidebar changes width when toggled and I want the content to appear next to it despite it being "long" or "short".

I am using a section per each page and would like each section to appear full width on screen (like so ) 

 $(document).ready(function() { $("#sidebarCollapse").click(function() { $("#sidebar").toggleClass("active"); $(this).toggleClass('active'); }); }); $("#aboutbutton").click(function() { $('html, body').animate({ scrollTop: $("#aboutDiv").offset().top }, 2000); }); 
 body { font-family: 'Poppins', sans-serif; background: #fafafa; } p { font-family: 'Poppins', sans-serif; font-size: 0.1em; font-weight: 300; line-height: 1.7em; color: #3498db; } a, a:hover, a:focus { color: inherit!important; text-decoration: none!important; transition: all 0.3s; } .wrapper { display: flex; } #sidebar { min-width: 250px; max-width: 250px; background: #2980b9; color: #ecf0f1; transition: all 0.3s; height: 100%; min-height: 100vh; position: fixed; } #sidebar.active { min-width: 80px; max-width: 80px; text-align: center; } #sidebar ul.components { padding: 20px 0; } #sidebar ul p { color: #fff; padding: 10px; } #sidebar ul li a { padding: 10px; font-size: 1.6em; display: block; text-align: left; } #sidebar ul li a:hover { color: #ecf0f1; background: #3498db; } #sidebar .active ul li a { padding: 20px 10px; text-align: center; font-size: 0.85em; } #sidebar .active i { font-size: 1em; } #sidebar .active ul li ai { margin-right: 0; display: block; font-size: 1.8em; margin-bottom: 5px; } #sidebar ul li.active>a, a[aria-expanded="true"] { color: #ecf0f1; background: #3498db; } ul ul a { font-size: 0.9em !important; padding-left: 30px !important; background: #ecf0f1; } #sidebarCollapse { width: 100%; height: 80%; background: #2980b9; padding: 20px 0; font-size: 1.6em; display: block; border: 0; } #sidebarCollapse-wrapper { padding-top: 5%; padding-bottom: 5%; } #sidebarCollapse span { width: 30%; height: 2px; margin: 0 auto; display: block; background: #fff; transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375); } #sidebarCollapse span:first-of-type { /* rotate first one */ transform: rotate(45deg) translate(2px, 2px); } #sidebarCollapse span:nth-of-type(2) { /* second one is not visible */ opacity: 0; } #sidebarCollapse span:last-of-type { /* rotate third one */ transform: rotate(-45deg) translate(1px, -1px); } #sidebarCollapse.active span { /* no rotation */ transform: none; /* all bars are visible */ opacity: 1; margin: 5px auto; } section { min-height: 100vh; height: 100vh; box-sizing: border-box; display: flex; } 
 <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"> <link href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/css/mdb.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.1/js/tether.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/js/mdb.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>José Gomes - Website</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <!-- Material Design Bootstrap --> <link rel="stylesheet" href="css/mdb.min.css"> <!-- Scrollbar Custom CSS --> <link rel="stylesheet" href="css/jquery.mCustomScrollbar.css"> <!-- Our Custom CSS --> <link rel="stylesheet" href="css/custom.css"> <!-- in your header --> <link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css"> </head> <body> <!-- Content will go here --> <div class="wrapper"> <!-- Sidebar --> <nav class="sidebar-nav" data-spy="affix" id="sidebar"> <!-- Sidebar Header --> <div id="sidebarCollapse-wrapper"> <button type="button" id="sidebarCollapse" class="navbar-btn waves-effect waves-light"> <span></span> <span></span> <span></span> </button> </div> <!-- Sidebar Links --> <ul class="list-unstyled components"> <li class="active waves-effect waves-light" id="aboutbutton"><a href="#"><i class="fa fa-user-circle" aria-hidden="true"></i> Home</a></li> <li class="waves-effect waves-light"><a href="#"><i class="fa fa-briefcase" aria-hidden="true"></i> Page1 </a></li> <li class="waves-effect waves-light"><a href="#"><i class="fa fa-cogs" aria-hidden="true"></i> Page2</a></li> <li class="waves-effect waves-light"><a href="#"><i class="fa fa-home" aria-hidden="true"></i> Page3</a></li> </ul> </nav> </div> <!-- Page Content --> <div id="content container-fluid p-0"> <div class="d-flex flex-column"> <section class="p-3 p-lg-5 content-page" id="Section1"> Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - </section> <section class="p-3 content-page"> Section 2 TEST - Section 2 TEST - Section 2 TEST - Section 2 TEST - Section 2 TEST - </section> <section class="p-3 content-page"> Section 3 TEST - Section 3 TEST - Section 3 TEST - Section 3 TEST</section> </div> </div> </div>

Here's the jsfiddle of the above code

I've tried a content wrapper and setting a margin for the content class but it still pushes the content down below the sidebar or inside it.

1 answers

solution1
 1 ACCPTED  2017-11-15 19:06:14

Something like this ? 

 $(document).ready(function() { $("#sidebarCollapse").click(function() { $("#sidebar").toggleClass("active"); $(this).toggleClass('active'); }); }); $("#aboutbutton").click(function() { $('html, body').animate({ scrollTop: $("#aboutDiv").offset().top }, 2000); }); 
 body { font-family: 'Poppins', sans-serif; background: #fafafa; } p { font-family: 'Poppins', sans-serif; font-size: 0.1em; font-weight: 300; line-height: 1.7em; color: #3498db; } a, a:hover, a:focus { color: inherit!important; text-decoration: none!important; transition: all 0.3s; } .wrapper { display: flex; } #sidebar { min-width: 250px; max-width: 250px; background: #2980b9; color: #ecf0f1; transition: all 0.3s; height: 100%; min-height: 100vh; position: fixed; } #sidebar.active { min-width: 80px; max-width: 80px; text-align: center; } #sidebar ul.components { padding: 20px 0; } #sidebar ul p { color: #fff; padding: 10px; } #sidebar ul li a { padding: 10px; font-size: 1.6em; display: block; text-align: left; } #sidebar ul li a:hover { color: #ecf0f1; background: #3498db; } #sidebar .active ul li a { padding: 20px 10px; text-align: center; font-size: 0.85em; } #sidebar .active i { font-size: 1em; } #sidebar .active ul li ai { margin-right: 0; display: block; font-size: 1.8em; margin-bottom: 5px; } #sidebar ul li.active>a, a[aria-expanded="true"] { color: #ecf0f1; background: #3498db; } ul ul a { font-size: 0.9em !important; padding-left: 30px !important; background: #ecf0f1; } #sidebarCollapse { width: 100%; height: 80%; background: #2980b9; padding: 20px 0; font-size: 1.6em; display: block; border: 0; } #sidebarCollapse-wrapper { padding-top: 5%; padding-bottom: 5%; } #sidebarCollapse span { width: 30%; height: 2px; margin: 0 auto; display: block; background: #fff; transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375); } #sidebarCollapse span:first-of-type { /* rotate first one */ transform: rotate(45deg) translate(2px, 2px); } #sidebarCollapse span:nth-of-type(2) { /* second one is not visible */ opacity: 0; } #sidebarCollapse span:last-of-type { /* rotate third one */ transform: rotate(-45deg) translate(1px, -1px); } #sidebarCollapse.active span { /* no rotation */ transform: none; /* all bars are visible */ opacity: 1; margin: 5px auto; } .sidebar-nav.active + div#content{ margin-left:80px; } .sidebar-nav:not(.active) + div#content{ margin-left:250px; } section { min-height: 100vh; height: 100vh; box-sizing: border-box; display: flex; } 
 <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"> <link href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/css/mdb.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.1/js/tether.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/js/mdb.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>José Gomes - Website</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <!-- Material Design Bootstrap --> <link rel="stylesheet" href="css/mdb.min.css"> <!-- Scrollbar Custom CSS --> <link rel="stylesheet" href="css/jquery.mCustomScrollbar.css"> <!-- Our Custom CSS --> <link rel="stylesheet" href="css/custom.css"> <!-- in your header --> <link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css"> </head> <body> <!-- Content will go here --> <!-- Sidebar --> <nav class="sidebar-nav" data-spy="affix" id="sidebar"> <!-- Sidebar Header --> <div id="sidebarCollapse-wrapper"> <button type="button" id="sidebarCollapse" class="navbar-btn waves-effect waves-light"> <span></span> <span></span> <span></span> </button> </div> <!-- Sidebar Links --> <ul class="list-unstyled components"> <li class="active waves-effect waves-light" id="aboutbutton"><a href="#"><i class="fa fa-user-circle" aria-hidden="true"></i> Home</a></li> <li class="waves-effect waves-light"><a href="#"><i class="fa fa-briefcase" aria-hidden="true"></i> Page1 </a></li> <li class="waves-effect waves-light"><a href="#"><i class="fa fa-cogs" aria-hidden="true"></i> Page2</a></li> <li class="waves-effect waves-light"><a href="#"><i class="fa fa-home" aria-hidden="true"></i> Page3</a></li> </ul> </nav> <!-- Page Content --> <div id="content" class="p-0"> <div class="d-flex flex-column"> <section class="p-3 p-lg-5 content-page" id="Section1"> Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - </section> <section class="p-3 content-page"> Section 2 TEST - Section 2 TEST - Section 2 TEST - Section 2 TEST - Section 2 TEST - </section> <section class="p-3 content-page"> Section 3 TEST - Section 3 TEST - Section 3 TEST - Section 3 TEST</section> </div> </div> </div>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Fixed width absolute sidebar with fluid content CSS sidebar with fixed width and fluid content Fixed Width Sidebar, Fluid Content area with 100% width table Make a sidebar div a fixed width while the main content is fluid Fixed sidebar and fluid content area Static/Fixed Sidebar and Fluid Content Creating a fixed width sidebar with a responsive container for content next to it in CSS Fixed Sidebar Within Container With Fluid Content fluid content pushes down fixed right sidebar Fluid sidebar on left with content on right; won't float next to each other with 100% width
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM