个人中心
gpt4 book ai didi

javascript - 为什么 div 比父 div 大？

转载 作者：行者123 更新时间：2023-11-28 12:47:10 24 4
gpt4 key购买 nike

以下代码存在以下问题:

  1. 为什么 div 的 left_right_wrapper 和 left_column 和 right_column流出 content_wrapper div？它们应该分别适合 content_wrapper 和 left_right_wrapper。

    1. 即使将溢出设置为自动，我也希望 html 元素没有滚动条；那就是我需要它正好是浏览器高度的大小(并且不超过它)。我怎样才能做到这一点？

我搜索了一下，发现JS函数height()可以返回浏览器屏幕的高度，但是怎么返回呢？我在 CSS 中将 height 属性的值设置为等于 JS 中函数返回的值？

请提出修复建议。

Here is the link to the fiddle. 

<html id="html" style="
      background: url(http://wallpaperscraft.com/image/50510/2560x1024.jpg?orig=1) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      overflow: auto;
      padding-bottom: 30px;
      padding-top: 68px;
      padding-left: 130px;
      padding-right: 130px;
      height:1024px;
      ">

    <div id="content_wrapper" style="
         height: 83vh;
         overflow: visible;
         background-color: #FAFAFF;
         padding-left: 30px;
         padding-right: 30px;
         //border-style: solid;
         //border-width: 20px;
         //border-color: pink;
         ">

        <div id="information_bar" style="
             /*background-color:buttonface;*/ 
             border-bottom-style:solid; 
             border-bottom-color:#A9A9B1; 
             border-bottom-width:1px; 
             padding:10px;
             ">
            <p style="
               font-family:sans-serif;
               font-weight: bold;
               font-size: 12px;
               color:#00005C; 
               "> I am the information bar </p>
        </div>

        <div id="right_left_wrapper" style="

             position: relative;
             height: 100%;
             width: 100%;
             overflow: hidden;
             background-color: pink;
             //border-style: solid;
             //border-width: 20px;
             //border-color: red;
             ">
            <div id="left_column" style="
                 //z-index: -5;
                 height:100%; 
                 width: 49.9%; 
                 float:left; 
                 overflow: auto; 
                 border-right-color:grey; 
                 border-right-width: 1px; 
                 border-right-style: solid; 
                 padding-bottom: 20px;
                 padding-left: 20px;
                 padding-right: 20px;
                 padding-top: 10px;
                 background-color: blueviolet;
                ">

                <p id="reading_passage" style="
                   font-family: sans-serif;
                   font-size: 14px;
                   text-align: justify;
                   ">Lorem Ipsum
                     is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever
                     since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived 
                     not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in
                     the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
                     software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting
                     industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
                     type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic 
                     typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem 
                     Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem 
                     Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever 
                     since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not 
                     only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 
                     1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software 
                     like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum
                     is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever
                     since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived 
                     not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in
                     the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
                     software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting
                     industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
                     type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic 
                     typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem 
                     Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem 
                     Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever 
                     since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not 
                     only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 
                     1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software 
                     like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
            <div id="right_column" style="
                 //z-index:-5;
                 height:100%; 
                 width:50%; 
                 float: right; 
                 overflow: auto;
                 //background-color: brown;
                 padding-bottom: 20px;
                 padding-left: 20px;
                 padding-right: 20px;
                 padding-top: 10px;

                 font-size:14px;
                 font-family: sans-serif;
                ">



            </div>

        </div>
    </div>

</html>

enter image description here

最佳答案

这是因为你的 #right_left_wrapper 有 height:100% 但你的 #information_bar 没有任何高度。放#right_left_wrapper{height:80%;} #information_bar{height:10%}。

关于javascript - 为什么 div 比父 div 大？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24841296/

24 4 0
文章推荐： javascript - 在整个网站上平滑滚动
文章推荐： ios - 如何在 App Store 应用程序的标签栏中同时使用实体和轮廓图标？
文章推荐： php - 如果没有附加元素，Wordpress 媒体按钮不起作用？
文章推荐： swift - 如何快速在两个 View 上使用滑动手势
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com