HTML/CSS : supprimer le défilement vertical avec hauteur : 100 % ;

Je crée deux colonnes que je veux remplir la page. Très simple. Cependant, j'obtiens une très légère barre de défilement verticale. Réglage margin: 0et padding: 0sur le htmlet bodyne l'a pas réparé.

J'ai regardé overflow: hiddenmais je n'aime pas. J'ai également cherché à placer une clear:bothdiv en bas, mais cela n'a rien fait. J'ai cherché à utiliser min-height, mais je n'arrive pas à le faire fonctionner correctement.

J'ai deux questions:

  • Pourquoi cette barre de défilement verticale apparaît-elle ?

  • Comment puis-je supprimer la barre de défilement verticale ?

    • Exemple en direct : http://jsfiddle.net/XrYYA/

    HTML :

    <body>
     <div id="palette">Palette</div>
     <div id="canvas">Content</div>
    </body>

    CSS :

    html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    }
    #palette {
    float: left;
    width: 300px;
    height: 100%;
    border: 1px solid black;
    }
    #canvas {
    margin-left: 300px;
    height: 100%;
    border: 1px solid blue;
    }


    Solution du problème

    C'est à cause des bordures de 1px de chaque côté de l'élément.

    100% + bordure(s) 2px!= 100%.

    Vous pouvez utiliser box-sizingpour inclure les bordures dans la hauteur de l'élément.

    Exemple jsFiddle

    div {
     box-sizing:border-box;
     -moz-box-sizing:border-box;
     -webkit-box-sizing:border-box;
    }

    Alternativement, vous pouvez utiliser calc()pour soustraire le 2px.

    height: calc(100% - 2px);

    Exemple jsFiddle

    Commentaires

    Enregistrer un commentaire

    Posts les plus consultés de ce blog

    Comment signer la connexion OKEx API version 5 avec websockets ?

    Bien que cette question ait reçu une réponse pour les versions précédentes de l'API OKEx utilisant REST, elle ne l'a pas été pour la dernière version 5 de l'API utilisant des websockets. Les docs sont ici. Je reçois l'erreur suivante {"event":"error","msg":"Invalid sign","code":"60007"} , il doit donc y avoir un problème avec l'algorithme de chaîne de signature, mais je n'arrive pas à identifier où je fais une erreur. import hmac import json import time import hashlib import asyncio import websockets passphrase = "XXXX" secret_key = b"XXXX" api_key = "XXXX" timestamp = int(time.time()) print("timestamp: " + str(timestamp)) sign = str(timestamp) + 'GET' + '/users/self/verify' total_params = bytes(sign, encoding= 'utf-8') signature = hmac.new(bytes(secret_key, encoding= 'utf-8'), total_params, digestmod=hashlib.sha256).digest() sign...
    Lire la suite

    La fonction GCP Cloud pour écrire des données dans BigQuery s'exécute avec succès, mais les données n'apparaissent pas dans la table BigQuery

    Image
    J'exécute la fonction cloud suivante. Il s'exécute avec succès et indique que les données ont été chargées dans la table. Mais lorsque j'interroge BigQuery, aucune donnée n'a été ajoutée. Je ne reçois aucune erreur et aucune indication que cela ne fonctionne pas. from google.cloud import bigquery import pandas as pd def download_data(event, context): df = pd.read_csv('https://covid.ourworldindata.org/data/ecdc/full_data.csv') # Create an empty list Row_list =[] # Iterate over each row for index, rows in df.iterrows(): # Create list for the current row my_list =[rows.date, rows.location, rows.new_cases, rows.new_deaths, rows.total_cases, rows.total_deaths] #print(my_list) # append the list to the final list Row_list.append(my_list) ## Get Biq Query Set up client = bigquery.Client() table_id = "<project_name>.raw.daily_load" table = client.get_table(table_id) print(client) print(table_id) print(table) errors = client.insert_rows(...
    Lire la suite

    Erreur Symfony : "Une exception a été levée lors du rendu d'un modèle"

    j'essaie d'inclure <link href="{{ asset('css/mystyle.css') }}" rel="stylesheet"/> dans mon fichier twig et le rendre. Mais cela me donne une exception PHP non interceptée Twig_Error_Runtime : "Une exception a été levée lors du rendu d'un modèle ("Le fichier manifeste de l'actif "/../public/build/manifest.json" n'existe pas.") ça marche quand j'utilise link href="css/mystyle.css" rel="stylesheet"/> . Voici mon contrôleur: <?php namespace App\Controller; use Symfony\Component\Routing\Annotation\Route; use Symfony\Bundle\FrameworkBundle\Controller\AbstractController; use Symfony\Component\HttpFoundation\Response; class WelcomeController extends AbstractController { /** * @Route("/", name="welcome") */ public function index() { return $this->render('welcome/index.html.twig'); } } Voici mon modèle de brindille : <!doctype html> ...
    Lire la suite