Страница не будет расширяться за счет содержимого

#html #css

#HTML #css

Вопрос:

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

CSS:

 #container { 
    width: 75%;
    height:100%;
    margin:0 auto;
    background-color:black;
    margin-top:10px;
    margin-bottom:10px;
    padding:10px;
    opacity:0.8;

#content { 
    width:100%;
}

footer {
    text-align: center;
    clear: both;
    color: #B05510;
    width: 75%;
    height: 115px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

<body>
<div id='container'>


    <?php
            include 'navfoot/navbar.php'
            ?>
        <div id='content'>
            <div id='paragraph'>
                <p>Eventually our website will be advanced enough for us to have a news feed! But until then we suck!</p>
            </div>
        </div>
    <?php
            include 'navfoot/footer.php'
            ?>
</div>

1. Я не использую идентификатор, я использую теги нижнего колонтитула, я могу его стилизовать.

2. Ваш элемент нижнего колонтитула расположен абсолютно, также я не уверен, допустили вы опечатку или нет, но #container не закрыт }

3. Нижнему колонтитулу не нужен идентификатор, если он используется правильно <footer></footer> . @Crikit ты можешь опубликовать html?

4. @Crikit Пожалуйста, опубликуйте сгенерированный HTML-код или поместите его в jsfiddle. net php-код не слишком помогает. Также неясно, что вы подразумеваете под переполнением контейнера

5. Вот мой веб-сайт sourceblockmc.net проблема в этом.

Ответ №1:

Это зависит от того, как вы хотите, чтобы нижний колонтитул действовал (всегда фиксированный внизу или относительно содержимого). Но, судя по тому, как это звучит, попробуйте добавить это в свой CSS нижнего колонтитула:

 footer {
    background-color: black;
    position: fixed;
}

Это сохранит ее неизменной и в нижней части страницы (по крайней мере, в Chrome). В противном случае укажите позицию: относительно нижнего колонтитула, и это опустит его в нижнюю часть содержимого.

Ответ №2:

Ширина вашего контейнера и нижнего колонтитула составляет 75%, а ширина вашего содержимого — 100%. Возможно, именно поэтому она выходит за пределы контейнера / нижнего колонтитула. Это зависит от порядка. Причиной этого может быть абсолютное расположение нижнего колонтитула. Вы могли бы попробовать изменить на относительный.

Пожалуйста, опубликуйте макет того, чего вы пытаетесь достичь, и HTML к тому, что у вас есть сейчас.

Если вы используете PHP includes, нам нужно посмотреть, что это такое. Множество переменных, которые могут привести к повреждению содержимого.

Если проблема возникает при изменении размера вашего браузера, это потому, что идентификатор абзаца ( #paragraph ) имеет фиксированную ширину 500 пикселей, а все остальное — в процентах.

Исправлено в нижнем колонтитуле, не разрешит текст, текущий поверх него.

1. Неверно… Это зависит от того, как структурирован html. Что, если содержимое находится внутри нижнего колонтитула? Нам следует дождаться дополнительной информации.

2. @LcSalazar да, я только что отредактировал это. Я понял, что если бы содержимое было внутри контейнера / нижнего колонтитула, все было бы в порядке. Я запросил HTML.