CSS: Изображение, придерживающееся нижней правой стороны документа
Для произвольного, потенциально большого числа необязательных параметров, хорошая идиома - использовать Функциональные опции .
Для вашего типа Foobar сначала напишите только один конструктор:
func NewFoobar(options ...func(*Foobar) error) (*Foobar, error){
fb := &Foobar{}
// ... (write initializations with default values)...
for _, op := range options{
err := op(fb)
if err != nil {
return nil, err
}
}
return fb, nil
}
, где каждая опция - это функция, которая мутирует Foobar. Затем предоставьте пользователю удобные способы использования или создания стандартных параметров, например:
func OptionReadonlyFlag(fb *Foobar) error {
fb.mutable = false
return nil
}
func OptionTemperature(t Celsius) func(*Foobar) error {
return func(fb *Foobar) error {
fb.temperature = t
return nil
}
}
Для краткости вы можете дать имя типу из опций ( Playground ):
type OptionFoobar func(*Foobar) error
Если вам нужны обязательные параметры, добавьте их в качестве первых аргументов конструктора перед переменным options.
Основными преимуществами идиомы Функциональные опции являются:
- Ваш API может расти со временем, не нарушая существующий код, потому что сигнатура конструктора остается той же, когда появляются новые опции необходимо.
- он позволяет использовать случай использования по умолчанию как самый простой: никаких аргументов вообще!
- он обеспечивает точный контроль над инициализацией комплексных значений.
Этот метод был придуман Робом Пайком , а также продемонстрирован Дейвом Чейни .
5 ответов
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test bottom right fixture</title>
</head>
<style type="text/css">
body{margin: 0;}
#top,#middle,#bottom{width:100%;}
#top,#bottom{height:200px;}
#middle{padding-bottom: 200px;}
#bottom{position: fixed;right:0;bottom:0;}
.red{background-color: red;}
.green{background-color: green;}
.blue{background-color: blue;}
</style>
<body>
<div id="top" class="red">
Lorem ipsum dolor sit amet
</div>
<div id="middle" class="green">
Lorem ipsum dolor sit amet
</div>
<div id="bottom" class="blue">
Lorem ipsum dolor sit amet
</div>
</body>
</html>
Это работает как с коротким средним содержимым, как показано, так и с более подробным средним содержимым, например: Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Concequat. Duis aute irure dolor в репреендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum. Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Concequat. Duis aute irure dolor в репреендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est Laborum.
Существует проблема, при которой, если высота страницы превышает 3 * 200 пикселей + middleContentHeight, вы увидите белый промежуток между зеленым и синим блоки. Это легко исправить, объявив цвет фона для тела.
Это очень распространенная проблема. решение: позиция: исправлено. Это делает то, что вы сказали, гарантирует, что элемент ВСЕГДА появляется в определенной позиции. Используйте
position: fixed;
bottom: 0px;
right: 0px;
, поэтому всегда будет отображаться в правом нижнем углу. idk, если вы можете сделать это с фоновым изображением, но это соответствует вашим требованиям. он не поддерживается в IE 6 (но опять же, что есть?). см. здесь для примера . прокрутите страницу вверх и вниз. Обратите внимание, как изображение всегда находится внизу окна браузера. Также убедитесь, что ваш z-index достаточно велик, если вы не хотите, чтобы что-то перетекало через него. : D
<img src="beta.jpg" class="specialImage" />
.specialImage{
position:fixed;
bottom:0;
right:0;
z-index:100; /* or higher/lower depending on other elements */
}
Чтобы добавить к ответу @stevedbrown:
.bottom { z-index: 2; }
где 2 - это просто более высокий z-индекс, чем у других элементов страницы
Если я правильно вас понял, используйте следующий CSS, чтобы поместить его справа и всегда внизу:
.bottom{
position: relative;
bottom: 0;
float: right;
}
Это то, чего вы пытаетесь достичь?