Различия

Показаны различия между двумя версиями страницы.

--- software:development:demo:cms:ucms:appendix:appendix_css [2026/04/15 08:17] – создано VladPolskiy
+++ software:development:demo:cms:ucms:appendix:appendix_css [2026/04/15 08:51] (текущий) – VladPolskiy
@@ Строка 54: / Строка 54: @@
 {{:software:development:demo:cms:ucms:appendix:css_sample_1.png?|}}
 </note>
+===== CSS: Установка ширины div как 100% минус n пикселей =====
+<code css sample.html>
+<!doctype html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta charset="utf-8">
+    <!-- запрет автоперевода перевода google translate -->
+    <meta name="google" content="notranslate">
+	<!-- отображение файктической ширины экрана для адаптивного дизайна -->
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>sample.html</title>
+	<!-- блок стилей css -->
+	<style>
+	body {
+    margin: 0;
+    padding: 0;
+	}
+	.container {
+    /* Ширина: 100% от экрана минус 1px */
+    width: calc(100vw - 2px);
+    /* Высота: 100% от экрана минус 1px */
+    height: calc(100vh - 2px);
+  	border: 1px solid #3498db; /* Синяя рамка 1px */
+	border-radius: 5px;
+	}
+	</style>
+	</head>
+	<body>
+    <!-- Вот наш главный заголовок, который используется на всех страницах нашего веб-сайта -->
+    <header>
+    </header>
+    <!-- Контейнер изображения (фона) профиля на котором будут распологаться кнопки меню
+         фото профиля, логотип приложени, имя пользователя	-->
+		<div class = "container">
+		</div>
+    <!-- И вот наш главный нижний колонтитул, который используется на всех страницах нашего веб-сайта
+    <footer>
+      <p>©2026 Sample HTML5 Page. All rights reserved.</p>
+    </footer> -->
+    <!-- Optional: Link to a JavaScript file -->
+    <script>
+	</script>
+  </body>
+</html>
+</code>
+<note shadow>
+{{:software:development:demo:cms:ucms:appendix:css_sample_2.png?|}}
+</note>