Блог

Главная - Вопросы по программированию - Структура HTML / CSS ведет себя не так, как ожидалось

Структура HTML / CSS ведет себя не так, как ожидалось

#html #jquery #css

#HTML #jquery #css

Вопрос:

У меня есть некоторый html-код, и я пытаюсь получить это:

части:

.main-wrapper — мне нужно сохранить это в абсолютном значении, чтобы элементы внутри работали с процентным размером. Я не хочу использовать vh или vw.

.main — это всегда должно быть 100% высоты и ширины.

.tbar — должен быть всегда виден слева от .main

.side — переключит скольжение слева и нажмет .bar и .main, когда он откроется.

Надеюсь, я правильно это объясняю.

Вот что я пробовал, но это неправильно:

 <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">

    <title></title>

    <style>

    .main-wrapper {
        position: absolute;
        top: 59px;
        right: 0;
        bottom: 0;
        left: 0px;
        border-left: 3px solid blue;
        background-color: grey;
    }

    .main-wrapper .side {
        width: 300px;
        height: 100%;
        background-color: blueviolet;
    }

    .main-wrapper .tbar {
        position: relative;
        left: 0px;
        height: 100%;
        width: 50px;
        background-color: green;
    }

    .main-wrapper .main {
        width: 100%;
        height: 100%;
        background-color: red;
    }

    </style>

  </head>
  <body>


    <nav class="navbar navbar-dark bg-dark navbar-expand">
        <span class="toggle-leftbar navbar-brand"><button id="togglebtn">Toggle</button></span>
        <a class="sidebar-toggle mr-3" href="#"><i class="fa fa-bars"></i></a>
        <div class="navbar-collapse collapse">
            <ul class="navbar-nav ml-auto">
                <li>Test</li>
            </ul>
        </div>
      </nav>


      <div class="main-wrapper">
        <div class="side">Side Here</div>
        <div class=tbar>TBar</div>
        <div class="main">Main Here</div>
      </div>


    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $( document ).ready(function() {
           $('.side').toggle();
        });
    </script>

  </body>
</html>

Как я могу заставить эти части делать то, что мне нужно?

Комментарии:

1. .main-wrapper - I need to keep this in absolute so that the elements inside work with percentage sizing. I don't want to use vh or vw. . Нет, нет, нет. elements inside работайте с процентным размером. Не используйте абсолютное позиционирование для чего-то, что в нем не нуждается. Кроме того, для проверки макета проверьте flexbox или css grid.

2. Я попытался изменить его на относительный или нет, и высота 100% останавливается working…it все синки

Ответ №1:

Вы также определяете $('.side').toggle(); , но когда вы нажимаете кнопку переключения, время срабатывает $('.side').toggle(); , поэтому вы пытаетесь щелкнуть функцию внутри, добавьте этот код следующим образом..

  $( document ).ready(function() {
        
            $( "#togglebtn" ).click(function() {
              $('.side').toggle();
            });

});  
    .main-wrapper {
        position: absolute;
        top: 59px;
        right: 0;
        bottom: 0;
        left: 0px;
        border-left: 3px solid blue;
        background-color: grey;
    }

    .main-wrapper .side {
        width: 300px;
        height: 100%;
        background-color: blueviolet;
    }

    .main-wrapper .tbar {
        position: relative;
        left: 0px;
        height: 100%;
        width: 50px;
        background-color: green;
    }

    .main-wrapper .main {
        width: 100%;
        height: 100%;
        background-color: red;
    }  
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
    
     <nav class="navbar navbar-dark bg-dark navbar-expand">
        <span class="toggle-leftbar navbar-brand"><button id="togglebtn">Toggle</button></span>
        <a class="sidebar-toggle mr-3" href="#"><i class="fa fa-bars"></i></a>
        <div class="navbar-collapse collapse">
            <ul class="navbar-nav ml-auto">
                <li>Test</li>
            </ul>
        </div>
      </nav>


      <div class="main-wrapper">
        <div class="side">Side Here</div>
        <div class=tbar>TBar</div>
        <div class="main">Main Here</div>
      </div>


    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>

Комментарии:

1. Почти там… только одна вещь… синяя граница принадлежит .main, и мне нужно, чтобы она была справа.tbar…at момент . main находится под .tbar … И текст main в настоящее время находится внизу

2. можете ли вы прикрепить снимок экрана? Как именно выглядит? Я не понимаю, о чем ты говоришь.

3. Если вы нажмете «Выполнить фрагмент кода выше», вы увидите синюю рамку (крайний левый)… это часть .main и должно быть справа от .tbar с is missing…it должно быть с правой стороны. Я пока не могу прикрепить изображения, извините:(