Header and footer does not follow page width

Asked

Viewed 60 times

0

When the page is lowered the footer nor the top bar accompanies the width of the page, they are cut. At the moment you don’t need to be responsive, just keep track of the page width when lowered. 

<style type="text/css">

        html,
        body {

            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0;

        }


        #tab1 td {

            white-space: normal;
            word-wrap: break-word;

        }
        
        table {

            padding-left: 10;
            font-size: 10px;
            font-family: Verdana, Geneva, sans-serif;
            text-align: center;

        }
        
        thead {

            font-weight: bold;
            background-color: #247099;
            text-align: center;
            color: #fff;

        }
        
        
        .tb3 {
            background: url('Sem-Título-1.jpg') no-repeat #3d6599;   
            background-position: left; 
            margin: auto;
            width: 100%;
            border-bottom: 5px solid;
            border-color: #F5F5F5;
            padding-top: 1em;
            padding-bottom: 1em;
            margin-bottom: 2em;

        }
        

         footer {

            color: DarkSlateGray;
            font-size: 10px;
            font-family: Verdana, Geneva, sans-serif;
            text-align: center;
            position: absolute;
            margin-top: 50;
            bottom: 0;
            width: 100%;
            height: 30;
            background-color: #F5F5F5;

        }

        .footerdiv {

            min-height:100%;
            position:relative;
            padding-bottom:50;

        }

    </style>
<html !DOCTYPE>
<head>
    <meta charset="utf-8">
    <title>Exemplo</title>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
    <link href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.css" rel="stylesheet" />

    <script>
        $(document).ready( function () {
    $('#tab1').DataTable();
    
} );
    </script>
    
    
</head>

<body>
    <div class="footerdiv">
    <table class="tb3">
        <tr>
            <td></td>
        </tr>

    </table>

    
    <table class="display nowrap" id="tab1" style="width:100%">
        <thead>
            <tr>
                <th>Lorem ipsum</th>
                <th>Lorem ipsum</th>
                <th>Lorem ipsum</th>
                <th>Lorem ipsum</th>
                <th>Lorem ipsum</th>
                <th>Lorem ipsum</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="td1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>

            </tr>
             <tr>
                <td class="td1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>

            </tr>
             <tr>
                <td class="td1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>

            </tr>
             <tr>
                <td class="td1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>

            </tr>
             <tr>
                <td class="td1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>

            </tr>
             <tr>
                <td class="td1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>

            </tr>
             <tr>
                <td class="td1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>

            </tr>
            
        </tbody>
    </table>
    <footer>
        <font>

            Lorem ipsum dolor sit amet
        </br>
        Lorem ipsum dolor sit amet

        </font>
    </footer>
</div>
</body>

</html>

javascript html css

  • I am reading the documentation of js Datatables and found nothing regarding the formatting and style of the bars you quoted (top search and page index in the footer). The focus of the API is only data display.

  • Do you talk about the Blue Bar at the top and the Gray Bar at the base? If they are they are already following the page size yes! http://prntscr.com/nhof7e I put a black border to show that everything is inside the page

  • @hugocsl, I think that the bars he refers to are the one on top that is written Show 10 entries Search ˾̅_̅_̅_̅_̅_̅_̅_̅_̅_̚ and the bottom bar is written Showing 1 to 7 of 7 entries

  • @hugocsl are these bars even, when the page is at 100% they stay on the whole screen. But try to decrease the browser page and move the horizontal bar, the footer and the top bar are cut and do not follow the width of the page.

  • @hugocsl https://i.imgur.com/H5wgyqx.png

3 answers

1


Thanks for the suggestion of all, I hit a lot of head about this problem but in the end I managed to solve. The problem was related to the table api, I edited the table script by adding these rows:

scrollY:        '100vh',
scrollCollapse: true,

And it was solved.

0

Hi, all good?

tries to fix the first part of your CSS by putting "width: max-content;". It will look like this:

html,
body {

    width: max-content;
    height: 100%;
    margin: 0px;
    padding: 0;

}

If I understand your problem, I believe that solves it. See you around

  • Hello, thanks for the suggestion. I tried to make this change but the horizontal bar is huge and disproportionate even with the page at 100%.

0

Apparently, the problem is not the size of the header or footer, but the table exceeding the right. I believe the problem is this selector I found in Devtools:

table.dataTable.nowrap th, table.dataTable.nowrap td {
<br/>
**white-space: nowrap;**
<br/>
} (jquery.dataTables.css:177)

This property is preventing the text from breaking, causing the table to assume the maximum available width. Maybe it is own of elements of the tables, but you can try to solve it by putting

table td, table th {
   white-space:normal;
}

  • Hello, thanks for the suggestion, but my problem is with the layout of the page and not only the table, making this change the formatting of the table text expands and the page width increases, which is not ideal and also continues with the problem of cutting the footer and the blue top bar. https://i.imgur.com/Cuv6pew.png

Browser other questions tagged javascript html css

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