Разделение контента перекрывает разделение меню - HTML & CSS

Question

У меня есть навигация по содержимому. Пожалуйста, дайте мне знать, что мне здесь не хватает. Пожалуйста, найдите ссылку скрипта ниже:

https://jsfiddle.net/y4c2xs5j/1/

HTML:

<div class="top-nav">
        <div class="menu-nav">
            <div class="row">
                <div class="col-md-12">
                    <span>Test</span>
                </div>
            </div>
        </div>
        <div class="content-nav">
            <div class="row">
                <div class="col-md-12">
                    <div>
                        <p>
                            Card content
                        </p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8">
                    <div>
                        <p>
                            Card content
                        </p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div>
                        <p>
                            Card content
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS:

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
    background: red;
    height: 100vh;
}

.top-nav {
    width: 100vw;
}

.menu-nav {
    width:60px;
    background: green;
    height: 100vh;
    float: left;
}
.content-nav {
    width: calc(100vw - 60px);
    background: yellow;
    height: 100vh;
}

Answer 1

Всякий раз, когда вы используете строки и столбцы, проверьте, есть ли у вас хотя бы один контейнер, в котором они содержатся.Разрыв, который вы видите справа, вызван отрицательными полями в строках.

Простое исправление состоит в том, чтобы иметь .container-fluid в меню или внутри меню и навигации.

В меню и содержимомnav

<div class="top-nav">
    <div class="menu-nav container-fluid">
        ...
    </div>
    <div class="content-nav container-fluid">
        ...
    </div>
</div>

демо: https://jsfiddle.net/davidliang2008/x9d3bvLp/8/

Навигация по меню и содержимому

<div class="top-nav">
    <div class="menu-nav">
        <div class="container-fluid">
            ...
        </div>
    </div>
    <div class="content-nav">
        <div class="container-fluid">
            ...
        </div>
    </div>
</div>

демо: https://jsfiddle.net/davidliang2008/x9d3bvLp/7/

Вам не нужно вычислять ширину для навигации по содержимому, поскольку контейнер для жидкости установит свою ширину на 100%:

.content-nav {
    /*width: calc(100vw - 60px);*/
    background: yellow;
    height: 100vh;
}

Answer 2

Попробуйте этот код.Это то, что вам нужно?

<div class="top-nav">
        <div class="menu-nav">
            <div class="row">
                <div class="col-md-12">
                    <span>Test</span>
                </div>
            </div>
        </div>
        <div class="content-nav">
            <div class="row">
                <div class="col-md-12">
                    <div>
                        <p>
                            Card content
                        </p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8">
                    <div>
                        <p>
                            Card content
                        </p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div>
                        <p>
                            Card content
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
    background: red;
    height: 100vh;
}

.top-nav {
    width: 100vw;
  display: flex;
  flex-direction: column;
}

.menu-nav {
    width: 100vw;
    background: green;
    height: 20vh;
    float: left;
}

.content-nav {
    width: calc(100vw - 100px);
    background: yellow;
    height: 100vh;
}

Answer 3

Вам просто нужно добавить одно свойство в ".content-nav", а также добавить класс clearifx в родительский тег обоих тегов (.menu-nav, .content-nav)

<div class="top-nav clearfix">

.menu-nav {
    width:60px;
    background: green;
    height: 100vh;
    float: left;
}

.content-nav {
    width: calc(100vw - 60px);
    background: yellow;
    height: 100vh;
    float: left;
}

Answer 4

Насколько я понимаю, вы хотите покрыть только 60 пикселей шириной с помощью меню-навигации, а остальные хотите покрыть содержимым-навигации, в соответствии с кодом ниже:

.menu-nav {
    width:60px;
    background: green;
    height: 100vh;
    float: left;
}
.content-nav {
    width: calc(100vw - 60px);
    background: yellow;
    height: 100vh;
}

Если я получаю правильные значения, тоВам просто нужно добавить еще одно свойство с помощью content-nav, overflow: hidden;

.menu-nav {
    width:60px;
    background: green;
    height: 100vh;
    float: left;
}
.content-nav {
    width: calc(100vw - 60px);
    background: yellow;
    height: 100vh;
    overflow:hidden;
}

При добавлении overflow hidden вы получите полную ширину, оставшуюся 60px с помощью content-nav, которая является причиной проблемы с помощью float:слева, когда мы используем свойство float, возникает проблема, для того же мы должны использовать переполнение: hidden