引导程序4，固定的右列与固定的边栏重叠，重叠的边栏与主体
[英]Bootstrap 4, fixed right column overlapping fixed sidebar which overlaps body
问题描述
我想固定右边的黑色列和固定的侧边栏，但是问题是它们都重叠了，我尝试了很多其他方法，但没有一个起作用，我尝试使用固定参数设置样式，但是它也不起作用。 我想要固定类content-c（即深色列），并固定边栏，而不会彼此重叠或位于主要内容中间的另一列
/* DEMO STYLE */ @import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"; body { font-family: 'Poppins', sans-serif; background: #fafafa; } p { font-family: 'Poppins', sans-serif; font-size: 1.1em; font-weight: 300; line-height: 1.7em; color: #999; } a, a:hover, a:focus { color: inherit; text-decoration: none; transition: all 0.3s; } .navbar { background: #fff; border: none; border-radius: 0; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); } .navbar-btn { box-shadow: none; outline: none !important; border: none; } .line { width: 100%; height: 1px; border-bottom: 1px dashed #ddd; margin: 40px 0; } .stay-open {display:block !important;} .codep { color: #f0ad4e; padding-top: 10px; padding-bottom: 10px; } .code { padding-top: 20px; padding-left: 3px; } .neapolitan { background:red; position:relative; height:1px; content:''; background:gray; width:100%; } .cont{ padding-top: 10px; } .cont h3 h2 h6{ padding-top: 20px; } .cont p{ color: #696969; font-size: 14px; } .label-default { background-color: #777; } .label { display: inline; padding: .2em .6em .3em; font-size: 75%; font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em; } .cont li { font-family: 'Poppins', sans-serif; font-weight: 300; line-height: 1.7em; color: #696969; font-size: 14px; padding-bottom: 10px; } .cont ul{ padding-left: 40px; } .cont{ height: 100vh; } .ind{ } .cont-t{ font-size: 11px; } .alert-info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; } .alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; border-radius: 4px; } .alert-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; } .alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } .alert-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; } /* Code snippet style for output.html*/ #dvid{ z-index: 0; position: absolute; } #dvid1{ z-index: 1; position: absolute; } #dvid2{ z-index: 2; position: absolute; } #dvid3{ z-index: 3; position: absolute; } #dvid4{ z-index: 4; position: absolute; } #dvid5{ z-index: 5; position: absolute; } /* --------------------------------------------------- SIDEBAR STYLE ----------------------------------------------------- */ #sidebar { min-width: 250px; max-width: 250px; background: #343a40; color: #fff; transition: all 0.3s; } #sidebar.active { margin-left: -250px; } #sidebar ul.components { } #sidebar ul p { color: #fff; padding: 10px; } #sidebar ul li a { padding: 10px; font-size: 0.9em; display: block; } #sidebar ul li a:hover { color: #343a40; background: #fff; } #sidebar ul li.active>a, a[aria-expanded="true"] { color: #fff; background: #f0ad4e; } a[data-toggle="collapse"] { position: relative; } .dropdown-toggle::after { display: block; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); } ul ul a { font-size: 0.7em !important; padding-left: 30px !important; background: #292b2c; } .content-c { height: 100vh; } .content-m{ height: 100vh; } .linknav { padding-left: 74px; } .linknav a{ display:inline; margin-right:1.5em; } /* --------------------------------------------------- MEDIAQUERIES ----------------------------------------------------- */ // Medium devices (tablets, 768px and up) @media (min-width: 768px) and (max-width: 991.98px) { #sidebar { margin-left: -250px; } #sidebar.active { margin-left: 0; } #sidebarCollapse span { display: none; } .navbar{ width: auto; } .content-c{ width: 30%; } .content-m{ width: 50%; } .content-cf{ width: 25%; } .content-mf{ width: 55%; } .sidebar{ width: auto; } }
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Font Awesome JS --> <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script> <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-1.8.3.js" integrity="sha256-dW19+sSjW7V1Q/Z3KD1saC6NcE5TUIhLJzJbrdKzxKc=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- Custom styles for this template --> <link href="../css/style.css" rel="stylesheet"> <script type="text/javascript" src="../js/script.js"></script> <title>Hello, world!</title> </head> <body> <div class="container-flex"> <!-- navbar top--> <nav class="navbar navbar-expand-lg navbar-light bg-dark"> <a class="navbar-brand" href="../index.html">IP Intelligence</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0 linknav"> <li class="nav-item active"> <a class="nav-link" href="../index.html">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="../input/input.html">Input</a> </li> <li class="nav-item"> <a class="nav-link" href="output.html">Output</a> </li> <li class="nav-item"> <a class="nav-link" href="../flags/flags.html">Flags</a> </li> <li class="nav-item"> <a class="nav-link" href="../flags/flags.html#error">Error Codes</a> </li> <li class="nav-item"> <a class="nav-link" href="../contact/contact.html">Contact</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search"> <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> </div> <div id="wrapper"> <div class="container-fluid"> <div class="row justify-content-between"> <!-- Sidebar --> <nav class="" id="sidebar" style="position: fixed;"> <ul class="list-unstyled components"> <li> <a href="../index.html">Home</a> </li> <li> <a href="#inputSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Input</a> <ul class="collapse list-unstyled" id="inputSubmenu"> <li> <a href="../input/input.html">Input</a> </li> <li> <a href="../input/input.html">Optional Input Settings</a> </li> </ul> </li> <li> <a href="#outputSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle" style="background: #f0ad4e;">Output</a> <ul class="collapse list-unstyled stay-open" id="outputSubmenu"> <li> <a href="output.html">Expected Output</a> </li> <li> <a href="output.html">Interpretation of the Results</a> </li> <li> <a href="output.html">Variations of Implementation</a> </li> </ul> </li> <li> <a href="../flags/flags.html">Comparing Flags</a> </li> <li> <a href="../flags/flags.html#error">Error Codes</a> </li> <li> <a href="../contact/contact.html">Contact</a> </li> </ul> </nav> <div class="container-flex content-m col-5"> <!--main page--> <div class="cont"> <span id = "othdiv"></span> <h3>Expected Output</h3> <p>On a valid request, the system will return a value between 0 - 1 (inclusive) of how likely the given IP is a proxy. On error, a negative value will be returned. If <span class="label label-default">format=json</span> is used, a valid JSON format will be returned with extra information, see below for details.</p> <br> <br> <span id = "othdiv1"></span> <h3>Interpretation of the Results</h3> <p>If a value of 0.50 is returned, then it is as good as flipping a 2 sided fair coin, which implies it's not very accurate. From my personal experience, values > 0.95 should be looked at and values > 0.99 are most likely proxies. Anything below the value of 0.90 is considered as "low risk". Since a real value is returned, different levels of protection can be implemented. It is best for a system admin to test some sample datasets with this system and adjust implementation accordingly. <b>I only recommend automated action on high values ( > 0.99 or even > 0.995 )</b> but it's always best to manually review IPs that return high values. For example, mark an order as "under manual review" and don't automatically provision the product for high proxy values. <b>Be sure to experiment with the results of this system before you use it live on your projects.</b> If you believe the result is wrong, don't hesitate to contact me, I can tell you why. If it's an error on my end, I'll correct it. If you email me, expect a reply within 12 hours. </p> <br> <br> <span id = "othdiv2"></span> <h3>Variations of Implementation</h3> <h6 class="ind">Use Dynamic Ban List Only (Skip Dynamic Check and Bad IP Checks)</h6> <p class="ind">If you get a value between 0 - 1, exclusive (like 0.99, 0.99999, 0.97), these values are generated by dynamic checks which looks for <b>characteristics</b> of the given IP. IPs that are either manually banned or seen on a public proxy site will return a value of 1. If you only want manually banned or public proxies, then in your code just look for the value "1". However, there are many IPs that haven't gone through manual review and IPs can change behavior very frequently (which is why dynamic checks exist in the first place). If you <b>only</b> look for the value of "1", then expect to have more proxy / VPN / bad IPs go through your system, however, false positives are less likely if you use the dynamic ban list option.</p> <br> <p class="ind">If you wish to use only manually banned & public proxy IPs, append the parameter <span class="label label-default"><span class="label label-default">&flags=m</span></span>, the system will only return a result of 0 or 1. <b>This option is the best to start off with that will have a noticeable impact in bot / proxy / VPN traffic, especially if you don't have any data sets to test with the system.</b> The query should look something like</p> <p class="ind alert alert-info">http://check.getipintel.net/check.php?ip=IPHere&contact=SomeEmailAddressHere&flags=m</p> <p class="ind">This option is the fastest. </p> <br> <br> <span id = "othdiv3"></span> <h6> Use Dynamic Ban List and Dynamic Checks Only (Skip Some of the Bad IP Checks)</h6> <p class="ind">In this scenario, you want to use dynamic checks as well but you want to skip additional checks to see if the IP is a bad ip (see What do you mean by "Bad IP"?). In this mode, some bad IPs are still detected but the system does not attempt to go through the full bad IPs check because the time for the extra checks vary wildly (between an extra 200ms to 2 seconds). In this mode, false positives are more likely than dynamic ban lists only. Scores are lower compared to the full IP check (without any flag options) because less attributes are considered.</p> <br> <p class="ind">If you wish to use dynamic ban list and dynamic checks only, append the parameter <span class="label label-default">&flags=b</span>.This option is the best if dynamic ban lists isn't catching enough IPs but you don't want to run the full check because it takes too long and/or you want to have a predictable execution time. The query should look something like </p> <p class="alert alert-info">http://check.getipintel.net/check.php?ip=IPHere&contact=SomeEmailAddressHere&flags=b</p> <p>This option is slower than dynamic ban lists only, but much faster than the full check (no flags in query). This option is good if you only want proxy / VPN detection and you do not care about bad IPs, but <span class="label label-default">&flags=m</span> is not catching enough proxy / VPN IPs. </p> <br> <br> <span id = "othdiv4"></span> <h6>Default Lookup</h6> <p class="ind"> This is the default lookup with no flags. Since the system is designed to work with real-time systems (return a result as fast as possible), some time consuming checks are put into a background process. This allows the system to return a result much faster. If those time consuming checks reveal that the returned result was not accurate (which is rare), the system will adjust the values. However, you must query the service again with the same IP to obtain the new result. Typically, the background jobs take no longer than 5 seconds to complete. If you want to force the system to do a full lookup (no background processes), use <span class="label label-default">&flags=f</span> option. </p> <span id = "othdiv5"></span> <br> <br> <br> <h6>Force Full Lookup</h6> <p> If you don't mind waiting up to 5 seconds for a result and you want the system to do a full lookup with one query, then use <span class="label label-default">&flags=m</span> option. The query should look something like </p> <p class="alert alert-info">http://check.getipintel.net/check.php?ip=IPHere&contact=SomeEmailAddressHere&flags=f</p> <p style="padding-bottom: 500px;">This option is the slowest and should only be used on non-real-time applications. </p> </div> </div> <div class="container-flex content-c col-4 bg-dark task-column" style="position: fixed;"> <!--Code Editor--> <h2 class="codep">Code Preview</h2> <div class="neapolitan"/> <div id="dvid"> <code>Code 0</code> </div> <div id="dvid1"> <code>Code 1</code> </div> <div id="dvid2"> <code>Code 2</code> </div> <div id="dvid3"> <code>Code 3</code> </div> <div id="dvid4"> <code>Code 4</code> </div> <div id="dvid5"> <code>Code 5</code> </div> </div> </div> </div> </body> </html>
1 个解决方案
解决方案1
0 2019-03-05 20:45:44
给出两个位置：fixed； 右：0像素; 并左：0px;
带有可滚动内容的标题和正文的CSS和DIV，以及右侧固定的侧边栏
[英]CSS and DIV with header and body with scrollable content, and fixed sidebar to right
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.