堆栈内存溢出
  简体   繁体   English

CSS-在固定导航栏下方对齐内容

[英]CSS - Align Content Below Fixed Navbar

 原文  2017-03-02 05:27:52  8   3    html/ css/ navbar/ fixed

问题描述

I'm trying to learn responsive CSS but having difficulty with some basic css design. 我正在尝试学习自适应CSS但是在一些基本的css设计上遇到了困难。 I've created a fixed navbar as you may be able to see in the code below. 我已经创建了一个固定的导航栏，您可以在下面的代码中看到。 But the problem i'm facing is that i'm not able to properly align content below it. 但是我面临的问题是我无法正确对齐其下方的内容。 The content is getting overlapped by the navbar. 导航栏正在重叠内容。 Can you suggest an appropriate CSS fix and not a workaround like adding empty divs with fixed heights? 您能建议一个适当的CSS修复方法，而不是像添加固定高度的空div这样的替代方法吗？ Here is the code: 这是代码： 

  *{ box-sizing: border-box; } body{ margin:0px; padding: 0px; background-color: darkgrey; } .title-bar{ position:fixed; margin-top:0px; z-index: 100; opacity: 1; background-color:white; width: 100%; height: 100px; border-bottom: solid 4px dodgerblue; } .page-container{ padding: 0px; } .menu-options{ list-style-type:none; } .menu-options li{ display: inline; padding: 10px; } .menu-options li:hover{ background-color: deepskyblue; } .menu-options li a{ color: black; text-decoration:none; } .clear20{ height: 40px; clear: both; } .clear10{ height: 20px; clear: both; } .display-bar-1{ background-color: deepskyblue; height: 200px; padding:40px; position: relative; } html { font-family: "Lucida Sans", sans-serif; } .caps { text-transform: uppercase; } .register_button{ text-align:center; padding-top:20px; padding-bottom:10px; width: 200px; height: 70px; border: solid 3px white; font-style:bold; font-size:14pt; } .register_button:hover{ background-color:navajowhite; color: white; cursor:pointer; border-color: black; } 
 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link href="responsive.css" rel="stylesheet"> </head> <body> <div class="page-container"> <div class="title-bar"> <table width="100%"> <tr> <td><h1> Multirater Surveys </h1></td> <td> <ul class="menu-options"> <li> <a href="#"> Home </a></li> <li> <a href="#"> How It Works </a></li> <li> <a href="#"> Features </a></li> <li> <a href="#"> Surveys </a></li> <li> <a href="#"> Plans and Pricings </a></li> <li> <a href="#"> Webinars </a></li> <li> <a href="#"> Blog </a></li> </ul> </td> </tr> </table> </div> <div class="display-bar-1"> <div class="row"> <div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;"> World Class Service <br> More Than 100 Clients </div> <div class="" style="padding:15px;float:left;width:40%;"> <div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div> </div> </div> </div> <div class="display-bar-2"> <div> <h1> Some random block of texts </h1> <p> Hello world how are you ? what is going on? </p> </div> </div> <div class="display-bar-1"> <div class="row"> <div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;"> World Class Service <br> More Than 100 Clients </div> <div class="" style="padding:15px;float:left;width:40%;"> <div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div> </div> </div> </div> <div class="display-bar-2"> <div> <h1> Some random block of texts </h1> <p> Hello world how are you ? what is going on? </p> </div> </div> <div class="display-bar-1"> <div class="row"> <div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;"> World Class Service <br> More Than 100 Clients </div> <div class="" style="padding:15px;float:left;width:40%;"> <div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div> </div> </div> </div> <div class="display-bar-2"> <div> <h1> Some random block of texts </h1> <p> Hello world how are you ? what is going on? </p> </div> </div> <div class="display-bar-2"> <div> <h1> Some random block of texts </h1> <p> Hello world how are you ? what is going on? </p> </div> </div> </div> <input type="text" class="caps"/> <script> window.onload = function(){ document.getElementById("register").onclick = function(){ window.location = "https://www.google.com"; } } </script> </body> </html> `responsive.html`

3 个解决方案

解决方案1
 1  2017-03-02 06:00:05

I made a few changes to your responsive.css file and it worked out for me. 我对您的sensitive.css文件做了一些更改，结果对我来说很有效。

Here are the changes that I made: 这是我所做的更改：

in title-bar class 在标题栏类中 

.title-bar{
    position:fixed;
    top: 0;
    z-index: 100;
    opacity: 1;
    background-color:white;
    width: 100%;
    height: 100px;
    border-bottom: solid 4px dodgerblue;
}

I changed margin-top:0px; 我改变了margin-top:0px; to top: 0; 至top: 0;

Why ? 为什么呢 To Set the top edge of the fixed positioned navbar to 0 below the top edge of its nearest positioned ancestor as told here 在固定定位导航栏的顶部边缘设置为0，其最近的定位的祖先的顶部边缘下面所讲述这里

and in the display-bar-1 并在显示栏1中 

.display-bar-1{
    background-color: deepskyblue;
    height: 200px;
    margin-top: 100px;
    padding:40px;
    position: relative;
}

I added margin-top: 100px; 我添加了margin-top: 100px;

Why ? 为什么呢 Your navbar had a height of 100px. 您的导航栏的高度为100像素。 So i gave a margin top of 100px to your display-bar-1 class. 因此，我为您的display-bar-1类提供了100px的边距。

Hope this resolves your issue. 希望这能解决您的问题。

解决方案2
 0  2017-03-02 05:44:53

Your navbar has a height of 100px. 您的navbar的高度为100像素。 So you need to start with your div s 100px below. 因此，您需要从下面的div 100px开始。 Add to the first div after the navbar this: 在navbar后添加到第一个div ： 

style="top:100px;"

Then it should work. 然后它应该工作。 It would look like this: 它看起来像这样： 

    <div class="display-bar-1" style="top:100px;">
        <div class="row">
            <div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
                World Class Service <br>
                More Than 100 Clients
            </div>
            <div class="" style="padding:15px;float:left;width:40%;">
                <div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
            </div>
        </div>
    </div>

Other ways would be to create an own css class for the first div after the navbar . 其他方法是在navbar之后的第一个div创建自己的css类。 Then you could also work with 那你也可以和 

padding-top:100px;

or 要么 

margin-top:100px;


  *{ box-sizing: border-box; } body{ margin:0px; padding: 0px; background-color: darkgrey; } .title-bar{ position:fixed; margin-top:0px; z-index: 100; opacity: 1; background-color:white; width: 100%; height: 100px; border-bottom: solid 4px dodgerblue; } .page-container{ padding: 0px; } .menu-options{ list-style-type:none; } .menu-options li{ display: inline; padding: 10px; } .menu-options li:hover{ background-color: deepskyblue; } .menu-options li a{ color: black; text-decoration:none; } .clear20{ height: 40px; clear: both; } .clear10{ height: 20px; clear: both; } .display-bar-1{ background-color: deepskyblue; height: 200px; padding:40px; position: relative; } html { font-family: "Lucida Sans", sans-serif; } .caps { text-transform: uppercase; } .register_button{ text-align:center; padding-top:20px; padding-bottom:10px; width: 200px; height: 70px; border: solid 3px white; font-style:bold; font-size:14pt; } .register_button:hover{ background-color:navajowhite; color: white; cursor:pointer; border-color: black; } 
 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link href="responsive.css" rel="stylesheet"> </head> <body> <div class="page-container"> <div class="title-bar"> <table width="100%"> <tr> <td><h1> Multirater Surveys </h1></td> <td> <ul class="menu-options"> <li> <a href="#"> Home </a></li> <li> <a href="#"> How It Works </a></li> <li> <a href="#"> Features </a></li> <li> <a href="#"> Surveys </a></li> <li> <a href="#"> Plans and Pricings </a></li> <li> <a href="#"> Webinars </a></li> <li> <a href="#"> Blog </a></li> </ul> </td> </tr> </table> </div> <div class="display-bar-1" style="top:100px;"> <div class="row"> <div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;"> World Class Service <br> More Than 100 Clients </div> <div class="" style="padding:15px;float:left;width:40%;"> <div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div> </div> </div> </div> <div class="display-bar-2"> <div> <h1> Some random block of texts </h1> <p> Hello world how are you ? what is going on? </p> </div> </div> <div class="display-bar-1"> <div class="row"> <div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;"> World Class Service <br> More Than 100 Clients </div> <div class="" style="padding:15px;float:left;width:40%;"> <div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div> </div> </div> </div> <div class="display-bar-2"> <div> <h1> Some random block of texts </h1> <p> Hello world how are you ? what is going on? </p> </div> </div> <div class="display-bar-1"> <div class="row"> <div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;"> World Class Service <br> More Than 100 Clients </div> <div class="" style="padding:15px;float:left;width:40%;"> <div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div> </div> </div> </div> <div class="display-bar-2"> <div> <h1> Some random block of texts </h1> <p> Hello world how are you ? what is going on? </p> </div> </div> <div class="display-bar-2"> <div> <h1> Some random block of texts </h1> <p> Hello world how are you ? what is going on? </p> </div> </div> </div> <input type="text" class="caps"/> <script> window.onload = function(){ document.getElementById("register").onclick = function(){ window.location = "https://www.google.com"; } } </script> </body> </html>

解决方案3
 0  2017-03-02 05:46:20

适当的方法是在div中添加padding-top，其填充与固定标头的高度相同。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 固定导航栏下方的内容（引导程序） - Content below fixed-top-navbar (bootstrap) css 导航栏 position 无固定内容 position - css navbar position without fixed content position 修复了带有可滚动导航栏的标题和不在浏览器视口下方的内容 - Fixed header with scrollable navbar and content that does not go below browser viewport 无法使内容位于固定导航栏的正下方 - Can't make content sit right below fixed navbar 如何在CSS / HTML中的Navbar下方放置文本/内容 - How to place text/content below Navbar in CSS/HTML 将内容对齐到底部（导航栏） - Align content to the bottom (Navbar) 导航栏不会与内容对齐 - Navbar wont align with content 如何在窗口底部对齐导航栏，但在 CSS 下有内容？ - How to align Navbar at bottom of window, but have content under this in CSS? 将固定导航栏精确对准轮播 - Exactly align a fixed navbar to a carousel 固定的导航栏重叠内容 - fixed navbar overlaps content
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM