使固定标题的宽度与容器div的大小相同

时间：2016-09-19 17:56:07

标签： html css

header元素位于div容器内。我将header设为fixed。它会导致2个问题：

  1. header的宽度溢出div元素的宽度。它应与div匹配。
  2. 当nav修复为article时，其他元素header和<!DOCTYPE html> <html> <head> <style> div.container { width: 100%; border: 1px solid gray; } header{ position:fixed; width:100%; right:0px; } header, footer { padding: 1em; color: white; background-color: black; clear: left; text-align: center; } nav { float: left; max-width: 160px; margin: 0; padding: 1em; } nav ul { list-style-type: none; padding: 0; } nav ul a { text-decoration: none; } article { margin-left: 170px; border-left: 1px solid gray; padding: 1em; overflow: hidden; } </style> </head> <body> <div class="container"> <header> <h1>City Gallery</h1> </header> <nav> <ul> <li><a href="#">London</a></li> <li><a href="#">Paris</a></li> <li><a href="#">Tokyo</a></li> </ul> </nav> <article> <h1>London</h1> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> </article> <footer>Copyright © W3Schools.com</footer> </div> </body> </html>不可见。

    3. 这就是它现在的样子： output

    这就是我希望它出现的方式： Image2

    这是我的代码段：

    ＆＃13;
    ＆＃13; 
    p = subprocess.Popen(command,
                        stdout=subprocess.PIPE,
                        stderr=subprocess.STDOUT,
                        shell=True)
    command_output = iter(p.stdout.readline, b'')
    ＆＃13;
    ＆＃13;
    ＆＃13;

4 个答案:

答案 0 :(得分：0)

这给了我想要的结果：

header {
/* Everything else is same as your code*/
position: relative;
}
header,footer {
/* Everything else is same as your code*/
padding: 1em 0;
}
  1. 您将div宽度设置为100％，标题宽度为其父级的100％，然后设置1em左右填充（padding：1em - ＆gt;所有4个边的填充，填充：1em 0 - ＆gt; top＆amp; ;底部1em，左边和右边0）。
  2. 你为什么固定？你需要标题才能粘到顶部吗？
    3. div.container {
  width: 100%;
  border: 1px solid gray;
}
header{
  position:fixed;
  width:100%;
}
header, footer {
  /*padding: 1em 0;*/
  color: white;
  background-color: black;
  clear: left;
  text-align: center;
}
header h1 {
  line-height: 2em;
  font-size: 2em;
}
nav {
  float: left;
  max-width: 160px;
  margin: 0;
  padding: 1em;
  margin-top: 6em;
}
nav ul {
  list-style-type: none;
  padding: 0;
}
nav ul a {
  text-decoration: none;
}
article {
  margin-left: 170px;
  border-left: 1px solid gray;
  padding: 1em;
  overflow: hidden;
  margin-top: 6em;
}

答案 1 :(得分：0)

没有什么只是把容器div放在文章之前。如果你想用最小宽度改变容器宽度：100％。但如果您需要文章全窗口大小。高度：100vh;只需要添加已经由我添加的.article类。跑吧

<!DOCTYPE html>
<html>
<head>
<style>
div.container {
    min-width: 100%;
    
    border: 1px solid gray;
}
header{
   postion:fixed;
   width:100%;
   right:0px;
}
header, footer {
    padding: 1em;
    color: white;
    background-color: black;
    clear: left;
    text-align: center;
}

nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 1em;
}

nav ul {
    list-style-type: none;
    padding: 0;
}
			
nav ul a {
    text-decoration: none;
}

article {
    margin-left: 170px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
     height:100vh; 
}
</style>
</head>
<body>

<header>
   <h1>City Gallery</h1>
</header>
  
<nav>
  <ul>
    <li><a href="#">London</a></li>
    <li><a href="#">Paris</a></li>
    <li><a href="#">Tokyo</a></li>
  </ul>
</nav>
 
<div class="container">
<article>
  <h1>London</h1>
  <p>London is the capital city of England. It is the most populous city in  
 the  United Kingdom, with a metropolitan area of over 13 million     
 inhabitants.</p>
  <p>Standing on the River Thames, London has been a major settlement for  
  two millennia, its history going back to its founding by the Romans, who 
  named it Londinium.</p>
</article>

<footer>Copyright © W3Schools.com</footer>

</div>

</body>
</html>

答案 2 :(得分：0)

将margin-top（在我的示例中为100px）添加到内容中的第一个非固定元素，以便为固定标题内容创建空间，另外添加html, body {margin: 0; }以重置影响的默认边距非固定内容的宽度。

并且还使用box-sizing: border-box;为所有元素包含百分比宽度中的边框。 （见摘录）

<!DOCTYPE html>
<html>

<head>
  <style>
    * {
      box-sizing: border-box;
    }
    body,
    html {
      margin: 0;
    }
    div.container {
      width: 100%;
      border: 1px solid gray;
    }
    header {
      position: fixed;
      width: 100%;
      right: 0px;
    }
    header,
    footer {
      padding: 1em;
      color: white;
      background-color: black;
      clear: left;
      text-align: center;
    }
    nav {
      float: left;
      max-width: 160px;
      margin: 0;
      padding: 1em;
      margin-top: 100px;
    }
    nav ul {
      list-style-type: none;
      padding: 0;
    }
    nav ul a {
      text-decoration: none;
    }
    article {
      margin-left: 170px;
      border-left: 1px solid gray;
      padding: 1em;
      overflow: hidden;
      margin-top: 100px;
    }
  </style>
</head>

<body>

  <div class="container">

    <header>
      <h1>City Gallery</h1>
    </header>

    <nav>
      <ul>
        <li><a href="#">London</a>
        </li>
        <li><a href="#">Paris</a>
        </li>
        <li><a href="#">Tokyo</a>
        </li>
      </ul>
    </nav>

    <article>
      <h1>London</h1>
      <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
      <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
    </article>

    <footer>Copyright © W3Schools.com</footer>

  </div>

</body>

</html>

答案 3 :(得分：0)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header" data-position="fixed">
    <h1>Fixed Header</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p><b>Tip:</b> To see the effect, try to resize the window if the scrollbar is not available.</p>

    <p><b>Tip:</b> Tapping the screen will hide and show the header/footer IF the scrollbar is available. The effect varies depending on where you are on the page.</p>

    <p>Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..</p>
  </div>

  <div data-role="footer" data-position="fixed">
    <h1>Fixed Footer</h1>
  </div>
</div>

</body>
</html>
相关问题
最新问题