Поместите div ниже абсолютного положения div без гнездования

Итак, у меня есть это абсолютное положение div в центре страницы. Я хочу разместить меню навигации под этим div, но я не могу вложить его в другой div. Есть какой-либо способ сделать это?Поместите div ниже абсолютного положения div без гнездования

Примечание: В примере кода фрагмента позиция absolute:bottom; не работает, но вы получаете эту идею.

HTML:

<div class="content">Hello world</div> 
<div class="menu">home | info | about us | contact</div>

CSS:

body { 
    position:relative; 
} 
.content { 
    position: absolute; 
    top: 10px; 
    bottom: 30px; 
    left: 10px; 
    right: 10px;background:grey; 
    min-height:400px; 
} 
.menu { 
    background:blue; width:100%; text-align:center; 
}

источник

2015-10-14 Remco van den Berg

«Я хотел бы поставить навигационное меню ниже этого DIV, но я не могу его гнездо с другой дел.» Зачем вам гнездиться? Div является блочным элементом, поэтому, когда вы кладете div после div, он появляется под ним. – desbest

Поддерживает ли '.content' постоянную высоту? – Justinas

Контент не является постоянной высотой. Это затрудняет –

Я надеюсь, что это может помочь вам.

jsfiddle

HTML

<div class="wrapper"> 
    <div class="content">Hello world</div> 
    <div class="menu">home | info | about us | contact</div> 
</div>

CSS

body { 
    position:relative; 
} 
.wrapper { 
    position: absolute; 
    top: 10px; 
    bottom: 30px; 
    left: 10px; 
    right: 10px; 
} 
.content { 
    background:grey; 
    min-height:50vh; 
} 
.menu { 
    background:blue; 
    width:100%; 
    text-align:center; 
}

источник

2015-10-14 11:51:38 Alex

Мы знаем 'позицию' в нижней части блока контента, поэтому мы можем использовать calc

.menu { 
    position: absolute; 
    top:calc(100% - 30px); 
}

.content { 
 
    position: absolute; 
 
    top: 10px; 
 
    bottom: 30px; 
 
    left: 10px; 
 
    right: 10px; 
 
    background: grey; 
 
    min-height: 50vh; 
 
} 
 
.menu { 
 
    position: absolute; 
 
    background: blue; 
 
    width: 100%; 
 
    text-align: center; 
 
    top: calc(100% - 30px); 
 
}

<div class="content">Hello world</div> 
 
<div class="menu">home | info | about us | contact</div>

Тем не менее, позиционирование bbsolute является очень бедных методом выкладки веб-страниц. Он чрезвычайно негибкий, и есть намного лучшие и более гибкие варианты. См. LearnLayout.com

источник

2015-10-14 11:54:10

Я знаю, что абсолютное позиционирование - это не путь, но это не для веб-сайта, а для приложения для слайд-шоу. он использует определенную структуру, поэтому я не могу/не хочу изменять большую часть существующего html/css –

Спасибо. Меню должно придерживаться содержимого div. я изменил минимальную высоту до 400 пикселей. Когда область просмотра меньше, чем 400 пикселей, меню должно оставаться ниже содержимого div –

В соответствии с запросом, приведено здесь position:absolute. С этим я использовал другое решение, чем calc(), так как calc() иногда может иметь неожиданные результаты.

html, body { 
 
    margin: 0; 
 
    height: 100%; 
 
    position:relative; 
 
} 
 

 
.menu, 
 
.content { 
 
    position: absolute; 
 
    top: 10px; 
 
    bottom: 30px; 
 
    left: 10px; 
 
    right: 10px; 
 
    background-color: lightgray; 
 
    min-width: 400px; 
 
} 
 
.menu { 
 
    background-color: lightblue; 
 
    text-align: center; 
 
    top: auto; 
 
    height: 20px; 
 
    bottom: 10px; 
 
}

<div class="content">Hello world</div> 
 
<div class="menu">home | info | about us | contact</div>

версия с использованием display: table, работает с IE8, так и для новых браузеров мы также сгибать как вариант (не показано здесь).

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    display: table; 
 
    box-sizing: border-box; 
 
    width: 100%; 
 
    height: 100%; 
 
    padding: 10px; 
 
} 
 
.page-row { 
 
    display: table-row; 
 
} 
 
.page-cell { 
 
    display: table-cell; 
 
    height: 0; 
 
} 
 
.page-cell-expanded { 
 
    height: 100%; 
 
} 
 

 
.content { 
 
    background-color: #999; 
 
} 
 
.menu { 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    height: 30px; 
 
    background-color: #99f; 
 
}

<div class="container"> 
 
    
 
    <div class="page-row"> 
 
    <div class="content page-cell page-cell-expanded"> 
 
     Hello world 
 
    </div> 
 
    </div> 
 
    
 
    <div class="page-row"> 
 
    <div class="menu page-cell"> 
 
     home | info | about us | contact 
 
    </div> 
 
    </div> 
 

 
</div>

источник

2015-10-14 11:55:49 LGSon

. Я знаю, что абсолютное позиционирование - это не путь, но это не для веб-сайта, а для приложения для слайд-шоу.он использует определенную структуру, поэтому я не могу/не хочу изменять большую часть существующего html/css –

@RemcovandenBerg Обновлен мой ответ и добавлен «позиция: абсолютный» – LGSon

Мой пример неправильный. Я обновил свой пример кода, чтобы иметь минимальную ширину в 400 пикселей. меню div должно по-прежнему придерживаться нижней части содержимого div, даже если размер экрана меньше 400 пикселей. –

Поместите div ниже абсолютного положения div без гнездования

ответ

Смежные вопросы