0

Надо добавить линию расположенную в нижней части страницы.

data.jsp:

<div style="width:40%;">
    <table id="paytable" class="display cell-border" cellspacing="0" width="100%">
        <thead>
        <tr>
            <th>Id</th>
            <th>Lastname</th>
            <th>Firstname</th>
            <th>Gender</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
        <tr>
            <th>Total</th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        </tfoot>
    </table>


</div>

footeros.jsp:

<footeros>
  &nbsp;
</footeros>

.css:

footeros {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #22c840;
}

Возможно проблема в position. position: absolute | fixed | relative | static | inherit Если использовать position: fixed ратотает, но при этом полоса всегда находиться в нижней части экрана (тем самым занимая часть экрана), а надо в нижней части страницы!

3 ответа 3

1

Реализация на flexbox

HTML

<body>
  <main>Some content...</main>
  <footeros></footeros>
</body>

CSS

body {
  margin: 0;
  padding:0;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
main {
   flex: 1;
}
footeros {
    width: 100%;
    display: block;
    height: 50px;
    background-color: #22c840;
}

Демо: http://codepen.io/anon/pen/zqaMvZ

P.S В демо для кроссбраузерности прошелся через autoprefixer

0

Не очень понятно, что Вы хотите сделать. Могу только предполагать, как вариант: Пример на jsfiddle.net

HTML:

<h3>Page wrapper</h3>
<div id='page'>
    <table cellspacing="0" border=1> <thead> <tr> <th>Id</th> <th>Lastname</th> <th>Firstname</th> <th>Gender</th> </tr> </thead> <tbody></tbody> <tfoot> <tr> <th>Total</th> <th></th> <th></th> <th></th> </tr> </tfoot> </table>
    <footeros></footeros>
</div>

CSS:

#page {
  width: 100%;
  position: relative;
  min-height: 300px;
  border: 1px solid gray;
}

footeros {
    position: absolute;
    left: 0;
    bottom: 50px;
    width: 100%;
    height: 50px;
    background-color: #22c840;
}
-1

А попробуй у body сделать просто border bottom: 50px solid color, то есть блок растяни на весь экран и присвой ему бордер.

1
  • Постарайтесь писать более развернутые ответы. Поясните, на чем основано ваше утверждение? 20 апр 2016 в 20:31

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.