Положение фиксированное и ширина 25% не соответствует правильной ширине

У меня есть два div. внешний div занимает 25%. И внутренний div расположен внизу (position: fixed; bottom: 0; width: 25%; border-top: 1px solid red), но это не занимает 25%.Положение фиксированное и ширина 25% не соответствует правильной ширине

Я добавляю border для этого div. Таким образом, из-за ширины появляется пустое пространство.

HTML:

<div id="main-div"> 
    <div id="outer-div"> 
     <div id="div-1"></div> 
     <div id="div-2"> 
      <div id="inner-div"></div> 
     </div> 
    </div> 
</div>

CSS:

#main-div{ 
    height: 100%; 
    width: 100%; 
    display: table; 
} 
#outer-div { 
    width: 100%; 
} 
#div-1, #div-2 { 
    width: 100%; 
} 
#inner-div { 
    position: fixed; 
    bottom: 0; width: 25%; 
    border-top: 1px solid red; 
}

Как наносить точно применять ширину 25% к inner-div который неподвижную позицию?

UPDATE Добавлена скрипка в расслоении плотного комментарии

источник

2017-01-02 D Aon

Это, кажется, работает хорошо.Можете ли вы сделать скрипку, где это не так? – nashcheez

https://jsfiddle.net/uur2h5w3/3/ Наружный div и внутренний div имеют ширину 25%, но внутренний div кажется, что он имеет большую ширину. –

Вы можете использовать ниже CSS для этого

#inner-div { 
    box-sizing: border-box; 
}

Вы можете проверить обновленный fiddle

источник

2017-01-02 09:30:58

Я не думаю, что это имеет значение, поскольку он не установил каких-либо бортовых границ для '' –

, можете ли вы поделиться любой ссылкой на скрипку, чтобы мы могли определить фактическую проблему. –

Удалите запас тела. Эта проблема из-за вас не удалить ваше тело margin вы можете просто исправить эту

body { 
margin:0; 
}

body { 
 
\t margin:0; 
 
} 
 
#main-div{ 
 
    height: 100%; 
 
    width: 100%; 
 
    display: table; 
 
    } 
 
#outer-div { 
 
    width: 100%; 
 
    } 
 
#div-1, #div-2 { 
 
    width: 100%; 
 
    } 
 
#inner-div { 
 
    position: fixed; 
 
    bottom: 0; width: 25%; 
 
    border-top: 1px solid red; 
 
}

<body> 
 
<div id="main-div"> 
 
    <div id="outer-div"> 
 
    <div id="div-1"></div> 
 
    <div id="div-2"> 
 
     <div id="inner-div"></div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</body>

источник

2017-01-02 09:37:15

Реальная причина, почему inner-div имеет больше ширины, чем outer-div является потому, что inner-div имеет position: fixed применяется к Это. Теперь, когда вы применяете position: fixed, он делает положение элемента относительно окна просмотра.

Итак, в этом случае inner-div относится к body, в котором применяются стили полей пользовательского агента. Чтобы они имели такую же ширину, примените margin: 0 к телу.

Также примените box-sizing: border-box к outer-div, чтобы исключить границу по ширине.

Я обновил скрипку для вас. Таким образом, оба div имеют одинаковую ширину.

https://jsfiddle.net/nashcheez/uur2h5w3/4/

источник

2017-01-02 10:20:17 nashcheez

Фиксированная позиция относительно окна браузера, следовательно, процентные значения будут относительно <HTML> элемента (http://www.w3schools.com/cssref/pr_class_position.asp). Хотя экспериментальный position:sticky может выполнить то, что вам нужно, поскольку оно относится к видовому экрану (родительский относительный элемент).

источник

2017-01-02 10:25:39 mulunehawoke

Вам необходимо сбросить настройки для браузера. По этой причине «внутренний-div» занимает пространство.

тела {поле: 0; обивка: 0;}

body{margin:0;padding:0;} 
 
#main-div{ 
 
    height: 100%; 
 
    width: 100%; 
 
    display: table; 
 
    background: blue none repeat scroll 0 0; 
 
    border: 1px solid blue; 
 
} 
 
#outer-div { 
 
    width: 25%; 
 
    border: 1px solid green; 
 
} 
 
#div-1 { 
 
    width: 100%; 
 
} 
 
#div-2 { 
 
    display: table; 
 
    height: 0; 
 
    padding-right: 2px; 
 
    width: 100%; 
 
} 
 
#inner-div { 
 
    text-align: center; 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 25%; 
 
    border-top: 1px solid red; 
 
    padding-bottom: 27px; 
 
    padding-top: 10px; 
 
}

<div id="main-div"> 
 
    <div id="outer-div"> //list 
 
     <div id="div-1"> //parent-scrol 
 
     <div id="div-2"> //scroll 
 
      <div id="div-3"> //inner-list 
 
       <div id="inner-div">wefffef</div> //create-new 
 
      </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

источник

2017-01-02 10:51:54

Положение фиксированное и ширина 25% не соответствует правильной ширине

ответ

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