繁体   English   中英

即使我将3个容器div的宽度设置为100%,网站也无法正常显示

Website not displaying properly even though I have 3 container div's with width set to 100%

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我不确定这里的问题是什么,但它使我感到沮丧。 我有一个用于徽标和链接的标头div,一个用于主要部分的包装div,然后是一个页脚。 宽度全部设置为100%,但是由于某种原因,右侧和底部溢出了空白。 这样做很有趣,如果我将鼠标移至页脚下方的空白处,则会选择页眉中的联系人链接!

他们有相当多的html和css,因此我决定只将你们链接到jfiddle,这样可以更容易地向您展示问题所在。 请注意,即使包装器的背景色设置为灰色,页眉的背景设置为白色,而页脚的背景设置为灰色,您仍可以向右滚动并找到空白。 都具有100%的宽度。 由于某种原因,页脚下方甚至会有空白。

我希望所有这些都有意义,并感谢您的帮助。 我敢肯定它有些愚蠢和明显,但我还是有点新!

http://jsfiddle.net/46andtool/Q2d4K/2/

这是主要的div CSS

/*body element*/ 

body {font-size: 100%; line-height: 1; max-width: 100%; font-family: 'Source Sans Pro', sans-serif;  }

/*contains #main and #footer*/

    #wrapper { width:100%; background-color:grey; border: none;}

#main { width:100%; margin: 0 auto; border: none;}/*main body of website, wrapped inside of the wrapper div*/

/*div that contains the banner and navigation*/

.header {width: 100%; margin: 0 auto;  background-color: #FFFFFF;  padding-bottom: 10px; margin-bottom: 10px;}

/*Logo*/

 #banner {float: left; max-width: 100%; margin: 0; padding: 0;}

/*navigation*/ 

#w { max-width: 100%; background-color: #FFFFFF; margin: 0; padding: 0; } 

和html:

<body>
 <div class="header">
    <a href="index.php"><img id="banner" src="img/******.png" alt="*******"></a>   
        <div id="w">
                <nav>
                    <ul id="ddmenu">
                        <li><a href="#">About</a>
                            <ul>
                                <li><a href="#">Our Mission</a></li>
                                <li><a href="#">The Staff</a></li>
                                <li><a href="#">History</a></li>

                            </ul>
                        </li>
                        <li><a href="#">Services</a>
                            <ul>
                                <li><a href="#">*****</a></li>
                                <li><a href="#">******</a></li>
                                <li><a href="#">******</a></li>
                            </ul>
                        </li>

                        <li><a href="#">Links</a>
                            <ul>
                                <li><a href="#">China</a></li>
                                <li><a href="#">Japan</a></li>
                                <li><a href="#">Canada</a></li>
                                <li><a href="#">Australia</a></li>
                                <li><a href="#">South America</a></li>
                            </ul>
                        </li>
                        <li><a href="contact.php">Contact Us</a></li>
                    </ul>
                </nav>
            </div>
        </div>


<div id="wrapper">
   <div id="main">
    <div id="innermain">
        <h1>Latest News and Events</h1>
        <h2>Welcome to !</h2>
          <p>gsfdgdfgsdfgsdfg
          </p>

         <div id="linebreak"></div> 
          <p>gfdhgdfhfgh</p>
          <br>

          <p>hgdhfghgfh</p>
          <br>

          <p>gdhfgdhfghfgh</p>
          <br>
    </div>

     <div id="rightside">
       <h1>Where To Find Us</h1>
       <a href="img/buildingpic.jpg"><div id="buildingpic"></div>  </a> 
       <div id="map_canvas"></div> 
       <p id="location">sadfasdfsadsdf<br> asdfsdfa<br> asdfdsfds<br> 555-3423</p>
    </div>
  </div>
</div>

<div id="footer">

  Site design by <a class ="links" href="example@yahoo.com">fsgfdg</a></a>&nbsp; &copy;   <?php echo date('Y');?> All Rights Reserved

</div>

</body>
1 个回复

这里有几件事会引起问题。

您的body自动带有边距,因此,如果您未专门设置margin:0px; ,它将溢出margin:0px;

您的#footerwidth:100%; 但它也有padding:10px 这些被合并,所以您有width:100% + 10px的填充。 尝试做类似我提供的事情,即width:94%; padding:10px 3%; 因此您的宽度变为94% + 3% + 3% = 100%

最后,您的#buildingpic元素具有width:300px ,在这种情况下,它比其所在的容器还要宽。您最好将其设置为width:100%height:auto; 自动限制容器的比例。 在这种情况下,我设置max-width:100%;

http://jsfiddle.net/Q2d4K/4/

此外,如果您始终使用ID,您将度过一生。 尝试对元素使用类,以便在需要时可以重复使用它们,或者至少在重复或选择优先级方面不存在问题。

1 为什么div的高度是0,即使我手动设置为34.4rem? [复制]

这个问题在这里已经有了答案: 为什么弹性项目仅限于父尺寸? (1 个回答) 7 个月前关闭。 我正在尝试通过模仿canva来提高我作为新前端开发人员的 css 和 html 技能。 这是我的代码: .content { height: calc(100vh - 7.2rem); overf ...

2020-08-18 06:01:10 3 67   html/ css
3 将固定div设置为父容器的100%宽度

我有一个带有一些填充的包装器,然后我有一个浮动的相对div,百分比宽度(40%)。 在浮动相对div内部,我有一个固定的div,我希望它的大小与其父级相同。 我知道固定div从文档流中删除,因此忽略了包装器的填充。 HTML CSS 这是必须的小提琴: http : ...

2013-07-23 09:50:31 7 144156   html/ css
5 即使源代码相同,我的网站也无法正常显示?

我在 html 和 css 中编写了一些代码来为我的网站添加导航栏。 如图所示,该代码显然可以从我的本地硬盘驱动器中运行。 但是,当我将此代码上传到我的 aws ec2 时,导航栏看起来不一样。 为什么会发生这种情况,我该如何解决? 我硬盘上的网站网站在线 @font-face { src: ur ...

6 一个 flexbox 问题,即使我有一个最大宽度的容器,它也会挤压一切

我有一个网站,它需要一个粘性页脚和一个max-width容器,并且在一页上需要一个100vh的英雄。 在我添加max-width容器之前一切正常。 请有人帮我理解这不起作用的原因和代码解决方案。 也许这是缺乏完整的理解,但任何帮助将不胜感激。 我似乎无法让所有三个工作:粘性页脚、 max-width ...

7 即使我有溢出,在某些情况下,div 的宽度也会增加:auto

我试图创建一个像网格一样的表格,它有两列(50/50 宽度),这样在每一列内,每一行都由另外两列(50/50 宽度)组成,这里是demo 。 另外我的目标是说如果一行内的右列需要更多宽度,滚动条才会出现。 它似乎在大多数情况下都有效。 例如,它适用于这样的数据: 即,蓝色矩形正确地将屏幕一分为二, ...

8 为什么即使将宽度设置为100%,我的网站的边缘也会有间隙?

更新:我已经包含了所有代码。 我将人体图像和背景图像的宽度设置为100%,并且在页面的周围有缝隙。 我尝试使用百分比,边距和填充进行操作,但到目前为止没有任何效果。 我的背景图像确实是黑色的,因此非常引人注目。 这是我的一些CSS: ...

2019-02-06 04:41:55 4 91   html/ css
9 我怎样才能使一排相对居中的居中
在100%的容器宽度中

我正在尝试将一列相对居中的div居中,该div包含具有悬停过渡而变为另一图像的图像。 在使悬停过渡正常工作的过程中,我将每个div的容器放置在相对位置。 我正在尝试使该行居中,因为窗口浏览器越来越小,以使其响应。 发生的行为虽然如此奇怪。 当浏览器窗口变得太小而无法容纳该行图像时 ...

暂无
暂无

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

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM