Положение зафиксировано с минимальной шириной? - PullRequest
Новая
       7

Положение зафиксировано с минимальной шириной?

0 голосов
/ 08 декабря 2018

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

Я пытаюсь добиться того, чтобы защитить текст в красной области (содержит ссылки) от изменения размера ниже определенного200px;

РЕДАКТИРОВАТЬ ЭТО ПОЛНЫЙ КОД 

<!doctype html>
<html>
<head>
<style>
#header{
height:60px;
width:100%;
background-color:#000;
position:fixed;
top:0;
left:0;
}

#leftdiv{
    width:15%;
    height:200px;
    background-color:#ED6062;
    float:left;
    position:fixed;
    left:0;
    top:60px;   
    min-width:100px;
    }
#middlediv{
    width:25%;
    height:200px;
    background-color:#F0E92B;
    float:left;
    position:fixed; 
    left:15%;
    top:60px;
    }
#rightdiv{
    width:60%;
    height:200px;
    background-color:#26D978;
    float:left;
    position:fixed;
    left:40%;
    top:60px;   
    }       


</style>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>

<div id='header'></div>
<div id='leftdiv'>Contains links</div>
<div id='middlediv'></div>
<div id='rightdiv'></div>

</body>
</html>

JSFiddle https://jsfiddle.net/85mpvxo7/

1 Ответ

0 голосов
/ 09 декабря 2018

min-width работает должным образом, ваша проблема в том, что #middlediv имеет left: 15% и находится поверх #leftdiv, а #leftdiv на самом деле шире, чем вы можете увидеть за #middlediv.

Я не уверен, что он полностью отвечает всем вашим требованиям, но проверьте это, я использую div-оболочку с отображением сетки, чтобы левый элемент сетки имел ширину max-content.Затем двум другим div нужно использовать оставшееся пространство, поэтому я помещаю их в другой div.https://jsfiddle.net/n3o679pf/

РЕДАКТИРОВАТЬ: он может быть чище, если использовать только изгиб на обертке https://jsfiddle.net/n3o679pf/2/, поэтому нет необходимости в этом уродливом #therest div я положил с использованием сетки. 

<div id='header'></div>
<div id='wrapper'>
  <div id='leftdiv'>Contains links</div>
  <div id='middlediv'></div>
  <div id='rightdiv'></div>
</div>

и CSS 

#wrapper {
  display: flex;
  width: 100%;
  position: fixed;
  top:60px;
  margin: 0;
}
#leftdiv{
    height:200px;
    background-color:#ED6062;
    min-width:200px;
}
#middlediv{
    width:35%;
    height:200px;
    background-color:#F0E92B;
}
#rightdiv{
    width:65%;
    height:200px;
    background-color:#26D978;
}
...