C 知道

消息
创作中心
douqu2481 2017-08-08 08:11
浏览 66

100％标题宽度不填充100％宽度？

I have a header and navbar (attached) then 2 input boxes below that. When I resize my screen to a smaller resolution, a scroller bar appears horizontally (which is weird as everything on the page is visible without scrolling), when I move this scroller bar, my header (with width 100%) cuts off and I just see the background underneath it. I have had this problem with multiple websites in the past, how do I fix it? My code is below.

assets/header.php

<html>
<link rel="stylesheet" type="text/css" href="/blog/assets/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/blog/assets/style.css">
<head>

</head>
<body>
  <div class="header"><br><br><br>
    <p>My Blog</p>
  </div>
  <div class="topnav" align="center">
    <a href="/">HOME</a>
    <a href="./latest">LATEST</a>
    <a href="./all">ALL</a>
    <a href="./about">ABOUT</a>
    <a href="./about">SEARCH</a>
  </div>

assets/style.css

@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
body {
   background-color: #D3D3D3;
   margin: 0 0 100px;
   font-family: "PT-Sans", sans-serif;
}

.header {
  display: block;
  width: 100%;
  height: 200px;
  background-image: url("./img/header-img.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-size:cover;
  background-position: center center;
}

.topnav {
    background-color: #333;
    overflow: hidden;
    position: relative;
    top: 0;
}

.topnav a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 100px;
    text-decoration: none;
    font-size: 17px;
    text-align: center;
}

.topnav a:hover {
    background-color: #ddd;
    color: black;
}

.topnav a.active {
    background-color: #4CAF50;
    color: white;
}
.header p {
  color: white;
  font-size: 50px;
  text-align: center;
  vertical-align: middle;
  font-family: 'Indie Flower', cursive;
}

index.php

<?php
include($_SERVER["DOCUMENT_ROOT"]."/blog/assets/header.php");
?>
<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <title>Create Blog</title>
<form action="send.php" method="POST" class="form">
<input type="text" name="title" placeholder="Title" class="input"><br>
<textarea name="blog-text" placeholder="Blog" class="input"></textarea>
</form>

style.css

.input {
  width: 50%;
}
.form {
  position: relative;
  left: 25%;
}

展开全部

  • 写回答

6条回答 默认 最新

  • dqq9695 2017-08-08 08:14
    关注

    add this in your stylesheet to fill the header 100%

    .header{
    width: 100%;
    margin-left: 0!important;
    margin-right: 0!important;
}
    评论
  • doulei6778 2017-08-08 08:17
    关注

    Check if that css file is being accessed first. If so then have the following 

    .header {
    display: block;
    width: 100% !important;
    height: 200px;
    background-image: url("./img/header-img.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-size:cover;
    background-position: center center;
}

    If still not working add lines one by one and see the effect.

    Let me know if you require any further help

    评论
  • dswmmvrg40957 2017-08-08 08:20
    关注
    .form {
    position: relative;
    /* left: 25%; */
    margin: 0 auto;
    text-align: center;
}
    评论
  • doukui9491 2017-08-08 08:20
    关注

    If the margin property has three values:

    margin: 25px 50px 75px; top margin is 25px right and left margins are 50px bottom margin is 75px

    so change your body tag to remove the left and right margin, may be that is why the full width is not filled

    评论
  • dongshike7171 2017-08-08 08:46
    关注

    i have tested this and it worked.when the size of explore become small without any horizontal scroll bar 

    <?php
include($_SERVER["DOCUMENT_ROOT"]."/blog/assets/header.php");
?>
    <style>
        .input {
          width: 50%;
        }
        .form {

          left: 25%;
        }
            </style>
        </head>
        <body>
        <continer>
          <div class="header"><br><br><br>
            <p>My Blog</p>
          </div>
          <div class="topnav" align="center">
            <a href="/">HOME</a>
            <a href="./latest">LATEST</a>
            <a href="./all">ALL</a>
            <a href="./about">ABOUT</a>
            <a href="./about">SEARCH</a>
          </div>
            <div class="form" style=" text-align: center;">
                    <form action="send.php" method="POST" class="form">
                    <input type="text" name="title" placeholder="Title" class="input"><br>
                    <textarea name="blog-text" placeholder="Blog" class="input"></textarea>
                    </form>
           </div>
        </continer>
        </body>
        </html>

    展开全部

    评论
  • doutongxuan1614 2017-08-08 08:49
    关注

    There's quite a few things that look wrong here, but I've shuffled your code into one document for testing purposes and it looks like the form is pushing over to the side, which is then making the page width wider, therefore allowing your header to go wider.

    So you need to either remove the left: 25% from the form or make give it a width of less than 75%.

    You need to be careful to maintain clean code, it looks like you'll end up with two 'head' tags from what you've posted, one of which is not needed and the other is not closed properly.

    评论
编辑
预览

报告相同问题？

手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区，与千万技术人共成长

专业的中文 IT 技术社区，与千万技术人共成长

关注【CSDN】视频号，行业资讯、技术分享精彩不断，直播好礼送不停！

关注【CSDN】视频号，行业资讯、技术分享精彩不断，直播好礼送不停！

 客服 返回
顶部