0

Пишу проект на ASP.NET, и здесь есть немного HTML/CSS, в которых я имею весьма поверхностные знания.
Есть картинка, которую я добавляю вниз страницы:

#picture {
    position: fixed; /* Фиксированное положение */

    left: 0; bottom: 0; /* Левый нижний угол */
    padding: 10px; /* Поля вокруг текста */
    background: white; /* Цвет фона */
    text-align: center; 
    width: 100%; /* Ширина слоя */
}

И какой-то текст в html файле. Когда текст доходит до картинки, то боковая полоса прокрутки не появляется, а просто обрывается текст.
Как исправить это?

Вот мастер-страница с картинкой (т.к. картинка присутствует на всех страницах).

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Store.master.cs" Inherits="L2Calc.Pages.Store" %>
<%@ Register TagPrefix="GS" TagName="CategoryLinks" Src="~/Controls/CategoryList.ascx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link rel="stylesheet" href="/Content/Styles.css" />
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="header">
                <div class="title"></div>
            </div>
            <div id="categories">
                <GS:CategoryLinks runat="server" />
            </div>
            <div>
                <asp:ContentPlaceHolder ID="bodyContent" runat="server" />

            </div>
        </div>
        <div id="picture">
           <asp:Image  ID="Image1" runat="server" Height="252px" ImageUrl="~/Content/Jak2N_croper_ru.jpeg" /> 
        </div>

    </form>
</body>
</html>

А вот текст

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FAQ.aspx.cs" Inherits="L2Calc.Pages.FAQ" 

MasterPageFile="~/Pages/Store.Master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="bodyContent" runat="server">
    <div id="content">
        <h4>Каждый веб-разработчик знает, что такое текст-«рыба». 
            Текст этот, несмотря на название, не имеет никакого отношения к обитателям водоемов. 
            Используется он веб-дизайнерами для вставки на интернет-страницы и демонстрации внешнего вида контента, 
            просмотра шрифтов, абзацев, отступов и т.д. Так как цель применения такого текста исключительно демонстрационная, 
            то и смысловую нагрузку ему нести совсем необязательно. Более того, нечитабельность текста сыграет на руку при 
            оценке качества восприятия макета.</h4>
        <div id="checkoutForm" class="checkout" runat="server"></div>
    </div>
</asp:Content>
2
  • 1
    Чтобы дать более точный ответ, покажите структуру html с текстом и картинкой.
    – user220409
    7 окт 2016 в 13:21
  • @OlmerDale Добавил код в вопрос
    – cruim
    7 окт 2016 в 15:13

2 ответа 2

0

Чтобы картинка не закрывала часть текста, добавьте блоку, который перед <div id="picture"> отступ снизу:

#container {
  padding-bottom: 252px; /* высота картинки */
  ...
}

#picture {
  position: fixed; /* Фиксированное положение */
  ...
}
2
  • не совсем понял этот кусок кода
    – cruim
    7 окт 2016 в 16:28
  • @cruim вот пример - текст не обрезается картинкой внизу 7 окт 2016 в 16:56
-1

Есть два варианта:

  1. Добавить overflow: visiblе;
  2. Сделать больше высоту блока с текстом.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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