Doubt in the layout composition

Asked

Viewed 76 times

1

Test scenario

I would like a layout basically according to the image:

tela

What I already have is the "FIXED BAR" and the "TAB MENU".

Details

In the image in example, I will have a table in the green area and in the blue area.

Being the blue area 40%, and green area 60%, counting with its areas "title".

Doubt

  • How can I do, to create this structure, and the areas should have this fixed proportion 40%/60%?

    • When you have more records than the accepted size, you should have the scroll bar (according to the rectangles in purple).
html bootstrap-4

  • "create a record table, "if tabular data, <table> ¯\(ツ)/¯

  • You say, simply create a table with fixed size? But then the bottom ones?

  • HTML elements will depend on what information is displayed. There is no way to understand what exactly you want to display. Is the problem creating the div, aligning it to the layout or displaying the data? The question title also didn’t help much ^^

  • With the available information I would say that you can do this very simply with HTML, CSS and JavaScript

  • @Leandroangelo But I wanted to know what to use for html... Use div, frame, etc to create this table view, with the side scroll, keeping the size fixed on the screen

  • The layout seems to me very simple, you can use semantics, calling the header div, plus, Section and article, etc... but basically its layout are 6 div, and the blue div has a fixed height... I believe that the fixed bar and the tabs will also have a fixed height although you did not say... And also I believe that the record table should occupy 100% of the remaining space is this? If that’s what it is, consider including those hints in the question, it will help to answer you

  • Frame, never scroll side you can apply in "any" element in css overflow-x: auto;

  • Amended question.

  • @hugocsl Almost that. The question is about how to structure the 2 Tables. One on top of the other, maintaining proportion, and having the scroll bar on the side... I changed every question, see if improved

  • But what exactly is the question? About the structure or want an html template/example? The structure would be basically (I will use class names to distinguish): <header>><div class="header-barra-fixa"></div><nav class="header-menus"></nav></header><section class="tabela-a"><div class="tabela-a-titulo"></div><div class="tabela-a-conteudo"></div></section>&#xA;<section class="tabela-b"><div class="tabela-b-titulo"></div><div class="tabela-b-conteudo"></div></section>

  • @Ricardopunctual would be basically what I said. In that case I would use Section to display the contents of the tables. But that way if you have 200 records in "table a", will display entire... what you wanted is with scroll bar... I will change the image...

  • this structure I suggested is a layout base. You can put overflow-y: auto in class tabela-a-conteudo and achieve this. I just thought that I should first structure the layout and then think about the composition of each particular part

  • "- should have this fixed ratio 40%/60%" 40/60% of what? Viewport? What’s left? Because you have a SLASH and a TABBED MENU out of these two elements... Needs to be with bootstrap?

  • @Lipespry-defolga- Yes, I am using bs4. the blue and green areas, ratio among themselves is 40%/60%. the 2 blue and green areas added, proportion to the rest, would be 70% and 30% the top menus.

  • Is it acceptable without bootstrap? Fixed bar + menu = 30%, Records = 70% (40/60%). Right?!

  • @Lipespry-defolga- in fact the doubt would be the end, but as it is very confused, I am at least trying to see without BS, and then turn to apply with BS... even because of the grids, I do not know if it will disturb, if I will have to create extra classes, or change something of BS...

  • In a general context, you need a layout following the posted image. After several comments, I understood that you want to "improve" what you already have ready. Why didn’t you post the code you already have!? I was halfway through the code to help you. Now I’m going to post it anyway! ;X

Show 12 more comments

3 answers

3


I will propose you a solution based on the fact that the Fixed Bar, and div of the Tabs have a fixed height, until pq would not make sense they have a variable height, since their content is not dynamic. Starting from this I determined that each one has 50px of altua, but you can put the size you want, since it "abata" that height of the tables Divs below.

So the base would be like this

.bar,
.aba {
  height: 50px;
}
.t1 {
  max-height: calc(40% - 50px);
  overflow-y: auto;
}
.t2 {
  max-height: calc(60% - 50px);
  overflow-y: auto;
}

I used the max-height so that if the contents of the first table are too small there won’t be a blank space between it and the bottom table. However when table 1 content exceeds 40% the scroll bar will appear!

inserir a descrição da imagem aqui

Notice the image that when the content is small it occupies only the necessary size, but when it grows more than what was determined appear the scrollbars.

Follow the image code above:

html,
body {
  height: 100%;
}

.wrapper {
  flex-direction: column;
}
.wrapper [class^="col"] {
  box-sizing: border-box;
  border: 1px solid #000;
  width: 100%;
  flex: initial;
}

.bar,
.aba {
  height: 50px;
}
.t1 {
  max-height: calc(40% - 50px);
  overflow-y: auto;
}
.t2 {
  max-height: calc(60% - 50px);
  overflow-y: auto;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />

  
<div class="container-fluid h-100">
  <div class="row h-100 wrapper">
    <div class="col-12 bar">Barra fixa</div>
    <div class="col-12 aba">Abas</div>
    <div class="col-12 t1"><table class="table">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr><tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table></div>
    <div class="col-12 t2"><table class="table">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr><tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table></div>
  </div>
</div>

1

I would do so:

HTML / CSS

.um{
  height: 40%;
  background-color: blue;
}
.dois{
  height: 60%;
  background-color: red;
  overflow:auto;
}

.conteudo{
  height: 800px
}

.mytable{
  max-height: 100%;
}
<div class='conteudo'>
   <div class='um'>

   </div>
   <div class='dois'>
      <table class='mytable'>
        <thead>
          <tr>
            <th>test</th>
            <th>test2</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>a</td>
          </tr>
          <tr>
            <td>a</td>
            <td>a</td>
          </tr>
          <tr>
            <td>a</td>
            <td>a</td>
          </tr>
          <tr>
            <td>a</td>
            <td>a</td>
          </tr>
          <tr>
            <td>a</td>
            <td>a</td>
          </tr>
          <tr>
            <td>a</td>
            <td>a</td>
          </tr>
          <tr>
            <td>a</td>
            <td>a</td>
          </tr>
          <tr>
            <td>a</td>
            <td>a</td>
          </tr>
          <tr>
            <td>a</td>
            <td>a</td>
          </tr>
          <tr>
            <td>a</td>
            <td>a</td>
          </tr>
          <tr>
            <td>a</td>
            <td>a</td>
          </tr>
          <tr>
            <td>a</td>
            <td>a</td>
          </tr>
          <tr>
            <td>a</td>
            <td>a</td>
          </tr>
          <tr>
            <td>a</td>
            <td>a</td>
          </tr>
          <tr>
            <td>a</td>
            <td>a</td>
          </tr>
          <tr>
            <td>a</td>
            <td>a</td>
          </tr>
          <tr>
            <td>a</td>
            <td>a</td>
          </tr>
          <tr>
            <td>a</td>
            <td>a</td>
          </tr>
          <tr>
            <td>a</td>
            <td>a</td>
          </tr>
          <tr>
            <td>a</td>
            <td>a</td>
          </tr>
          <tr>
            <td>a</td>
            <td>a</td>
          </tr>
          <tr>
            <td>a</td>
            <td>a</td>
          </tr>
          <tr>
            <td>a</td>
            <td>a</td>
          </tr>
        </tbody>
      </table>
   </div>
</div>

  • 1

    could not improve the answer and put a snippet here showing the working? ah, and about must have the scroll bar?

  • 1

    That’s it... just missed the overflow: auto in um. But that’s basically it. I’ll test and return. Thank you!

  • 1

    Now the question... Applying this with BS4... I should then create specific class for these div!? Because BS has his entire grid scheme... as it would appear !?

  • I believe I would have to do the css yes, since the height does not work with % unless the previous div has a fixed height! In the div one and two I would wear col-lg-12 and in the conteudo would use row in addition to the css I entered in the reply

1

"- blue and green areas, ratio to each other is 40%/60%. the 2 blue and green areas added, ratio to rest, would be 70% and 30% the top menus"

Example with pure HTML and CSS (run in full screen):

div.layout {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
div.layout > header {
    width: 100%;
    background-color: red;
    height: 15vh;
}
div.layout > nav {
    width: 100%;
    background-color: yellow;
    height: 15vh;
}
div.layout > main {
    width: 100%;
    height: 70vh;
}
div.layout > main > section > div.cabecalho {
    width: 100%;
    background-color: rgb(255, 175, 200);
    height: 30px;
    position: relative;
}
div.layout > main > section > div.cabecalho > h2 {
    margin: 0;
    padding: 3px;
}
div.layout > main > section > div.cabecalho > nav {
    position: absolute;
    right: 5px;
    top: 5px;
}
div.layout > main > section > div.registrosA {
    width: 100%;
    /*
     * REGRINHA DE 3...
     * 70 = 100
     * x = 40
     *
     * x = 28
     */
    height: calc(28vh - 30px);
    background-color: rgb(90, 130, 250);
    overflow: auto;
}
div.layout > main > section > div.registrosB {
    width: 100%;
    /*
     * REGRINHA DE 3 DE NOVO...
     * 70 = 100
     * x = 60
     *
     * x = 42
     */
    height: calc(42vh - 30px);
    background-color: rgb(0, 170, 0);
    overflow: auto;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Layout</title>
    </head>
    <body>
        <div class="layout">
            <header>
                BARRA FIXA
            </header>
            <nav>
                MENU EM ABAS
            </nav>
            <main>
                <section>
                    <div class="cabecalho">
                        <h2>TITULO</h2>
                        <nav>
                            <a href="#">Adicionar</a>
                            <a href="#">Atualizar</a>
                        </nav>
                    </div>
                    <div class="registrosA">
                        <p>REGISTROS A</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem velit recusandae cupiditate aut quas pariatur doloribus vero maiores nulla porro possimus accusamus expedita, quibusdam, aspernatur numquam perferendis a quod omnis?</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem velit recusandae cupiditate aut quas pariatur doloribus vero maiores nulla porro possimus accusamus expedita, quibusdam, aspernatur numquam perferendis a quod omnis?</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem velit recusandae cupiditate aut quas pariatur doloribus vero maiores nulla porro possimus accusamus expedita, quibusdam, aspernatur numquam perferendis a quod omnis?</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem velit recusandae cupiditate aut quas pariatur doloribus vero maiores nulla porro possimus accusamus expedita, quibusdam, aspernatur numquam perferendis a quod omnis?</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem velit recusandae cupiditate aut quas pariatur doloribus vero maiores nulla porro possimus accusamus expedita, quibusdam, aspernatur numquam perferendis a quod omnis?</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem velit recusandae cupiditate aut quas pariatur doloribus vero maiores nulla porro possimus accusamus expedita, quibusdam, aspernatur numquam perferendis a quod omnis?</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem velit recusandae cupiditate aut quas pariatur doloribus vero maiores nulla porro possimus accusamus expedita, quibusdam, aspernatur numquam perferendis a quod omnis?</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem velit recusandae cupiditate aut quas pariatur doloribus vero maiores nulla porro possimus accusamus expedita, quibusdam, aspernatur numquam perferendis a quod omnis?</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem velit recusandae cupiditate aut quas pariatur doloribus vero maiores nulla porro possimus accusamus expedita, quibusdam, aspernatur numquam perferendis a quod omnis?</p>
                    </div>
                </section>
                <section>
                    <div class="cabecalho">
                        <h2>TITULO</h2>
                        <nav>
                            <a href="#">Adicionar</a>
                            <a href="#">Atualizar</a>
                        </nav>
                    </div>
                    <div class="registrosB">
                        <p>REGISTROS B</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem velit recusandae cupiditate aut quas pariatur doloribus vero maiores nulla porro possimus accusamus expedita, quibusdam, aspernatur numquam perferendis a quod omnis?</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem velit recusandae cupiditate aut quas pariatur doloribus vero maiores nulla porro possimus accusamus expedita, quibusdam, aspernatur numquam perferendis a quod omnis?</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem velit recusandae cupiditate aut quas pariatur doloribus vero maiores nulla porro possimus accusamus expedita, quibusdam, aspernatur numquam perferendis a quod omnis?</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem velit recusandae cupiditate aut quas pariatur doloribus vero maiores nulla porro possimus accusamus expedita, quibusdam, aspernatur numquam perferendis a quod omnis?</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem velit recusandae cupiditate aut quas pariatur doloribus vero maiores nulla porro possimus accusamus expedita, quibusdam, aspernatur numquam perferendis a quod omnis?</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem velit recusandae cupiditate aut quas pariatur doloribus vero maiores nulla porro possimus accusamus expedita, quibusdam, aspernatur numquam perferendis a quod omnis?</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem velit recusandae cupiditate aut quas pariatur doloribus vero maiores nulla porro possimus accusamus expedita, quibusdam, aspernatur numquam perferendis a quod omnis?</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem velit recusandae cupiditate aut quas pariatur doloribus vero maiores nulla porro possimus accusamus expedita, quibusdam, aspernatur numquam perferendis a quod omnis?</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem velit recusandae cupiditate aut quas pariatur doloribus vero maiores nulla porro possimus accusamus expedita, quibusdam, aspernatur numquam perferendis a quod omnis?</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem velit recusandae cupiditate aut quas pariatur doloribus vero maiores nulla porro possimus accusamus expedita, quibusdam, aspernatur numquam perferendis a quod omnis?</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem velit recusandae cupiditate aut quas pariatur doloribus vero maiores nulla porro possimus accusamus expedita, quibusdam, aspernatur numquam perferendis a quod omnis?</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem velit recusandae cupiditate aut quas pariatur doloribus vero maiores nulla porro possimus accusamus expedita, quibusdam, aspernatur numquam perferendis a quod omnis?</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem velit recusandae cupiditate aut quas pariatur doloribus vero maiores nulla porro possimus accusamus expedita, quibusdam, aspernatur numquam perferendis a quod omnis?</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem velit recusandae cupiditate aut quas pariatur doloribus vero maiores nulla porro possimus accusamus expedita, quibusdam, aspernatur numquam perferendis a quod omnis?</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem velit recusandae cupiditate aut quas pariatur doloribus vero maiores nulla porro possimus accusamus expedita, quibusdam, aspernatur numquam perferendis a quod omnis?</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem velit recusandae cupiditate aut quas pariatur doloribus vero maiores nulla porro possimus accusamus expedita, quibusdam, aspernatur numquam perferendis a quod omnis?</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem velit recusandae cupiditate aut quas pariatur doloribus vero maiores nulla porro possimus accusamus expedita, quibusdam, aspernatur numquam perferendis a quod omnis?</p>
                    </div>
                </section>
            </main>
        </div>
    </body>
</html>

The fixed bar (top) and the menu on tabs became somewhat large. But it follows as requested in the comments of the question: I took the 70% of the records and the other 30% divided in these two bars...

Browser other questions tagged html bootstrap-4

You are not signed in. Login or sign up in order to post.