个人中心
gpt4 book ai didi

html - CSS 定位 div 在其他 div 中

转载 作者：行者123 更新时间：2023-11-28 02:43:36 27 4
gpt4 key购买 nike

我有一个网页看起来有点像下面的 plunkr: https://plnkr.co/edit/UyM3DDrH9Y5P8jGTfLp4?p=preview

简而言之:我有一个标题和一个副标题。在其中一页上，我有一个列表(以列的方式)，我可以在其中选择任何元素。选择后，右侧的表格应填写正确的信息，以便我进行更改。

现在我的问题与定位有关。由于列表比页面更远，因此存在页面滚动。

我想要的是表单会随之向下滚动。所以用户在选择任何元素后不必上页面。有没有办法根据它的上层 div 来固定它(没有 JQuery)？我不想根据页面固定它，因为它没有固定页面顶部的高度。

  • 如果表单在滚动时也能先填满导航栏的空间，那就太好了。所以页面顶部不会有任何空白。 (滚动时)

不知道我的问题是否清楚。

所以我的代码(简而言之)看起来有点像这样:

<div class="navbar navbar-default">
    // Here will be navbar items
</div>
<div class="container-fluid">
    <div class="col-md-3 col-sm-4">
       // Here the list will be (list-group) 
    </div>
    <div class="col-md-9 col-sm-8">
        <form>
            //This form represents edit fields for the items in the list
            // I want this form to be on top of page while scrolling down the list.
        </form>
    </div>
</div>

亲切的问候

最佳答案

我不确定我是否正确理解了你的问题。但如果我有，我认为这就是您寻求的解决方案:(它需要一些额外的样式)

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <!-- Le styles -->
    <link data-require="bootstrap-css" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
    <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
    <style>
    #formright {
      position:fixed;
      top:1;
      right:0;
      width:600px;
    }
      body {
        padding-top: 60px;
      }
      @media (max-width: 979px) {

        /* Remove any padding from the body */
        body {
          padding-top: 0;
        }
      }
    </style>
    <link href="style.css" rel="stylesheet" />
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico" />
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
    <!-- Le javascript
    ================================================== -->
    <script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script data-require="bootstrap" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">Project name</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="active">
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#about">About</a>
              </li>
              <li>
                <a href="#contact">Contact</a>
              </li>
            </ul>
          </div>
          <!--/.nav-collapse -->
        </div>
      </div>
    </div>
    <div class="container-fluid">
    <ul  class="nav nav-tabs navmargin">
        <li  class="subnav active" ><a>Zenders</a></li>
        <li  class="subnav"><a>Bronnen</a></li>
        <li  class="subnav"><a>Programma's</a></li>
        <li  class="subnav"><a>Gebruikers</a></li>
    </ul>
    
    <admin-channels _nghost-c4="">
      <div _ngcontent-c4="" class="col-md-3 col-sm-4">
        <div _ngcontent-c4="" class="list-group">
          <button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
          <button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
          <button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
          <button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
          <button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
          <button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
          <button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
          <button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
          <button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
          <button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
          <button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
          <button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
          <button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
          <button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
          <button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
          <button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
          <button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
          <button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
          <button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
          <button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
          <button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
        </div>
      </div>
      <div id="formright">
      <div  class="col-md-9 col-sm-8">
        <form  novalidate="" class="ng-untouched ng-pristine ng-valid">
          <div  class="form-group">
            <label  class="control-label col-md-3" for="name">Naam</label>
            <div class="col-md-9">
                <input class="form-control ng-untouched ng-pristine ng-valid" id="name" name="name" placeholder="Vul naam in..." required="" type="text" ng-reflect-required="" ng-reflect-name="name" ng-reflect-model="VIER">
            </div>
           </div>

          <div _ngcontent-c4="" class="form-group">
            <label _ngcontent-c4="" class="control-label col-md-3" for="papercuts">Gebruiken</label>
            <div _ngcontent-c4="" class="col-md-9">
                <input _ngcontent-c4="" class="form-control ng-untouched ng-pristine ng-valid" id="showChannel" name="showChannel" type="checkbox" ng-reflect-name="showChannel" ng-reflect-model="true">
            </div>
          </div>

          <div _ngcontent-c4="" class="form-group">
            <div _ngcontent-c4="" class="col-md-offset-3 col-md-9">
                <button _ngcontent-c4="" class="btn btn-success" style="width:100%" type="submit">Opslaan</button>
                <button _ngcontent-c4="" canceltext="Nee" class="btn btn-danger" confirmtext="Ja" message="Bent u zeker?" mwlconfirmationpopover="" placement="top" style="width: 100%" title="Verwijderen zender" type="button" ng-reflect-title="Verwijderen zender" ng-reflect-message="Bent u zeker?" ng-reflect-confirm-text="Ja" ng-reflect-cancel-text="Nee" ng-reflect-placement="top">Verwijderen</button>
            </div>
          </div>
        </form>
        </div>
      </div>
    </admin-channels>
    </div>
    <!-- /container -->
  </body>

</html>

关于html - CSS 定位 div 在其他 div 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47036803/

27 4 0
文章推荐： javascript - 滚动时事件菜单不会改变
文章推荐： jquery - 添加转换以隐藏/显示列表项
文章推荐： python - Django 模板扩展
文章推荐： html - 如何垂直居中文本而不考虑内容
行者123
个人简介

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

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